目标效果
- 目标: 头部导航吸顶
- 效果图
思路
- 首先准备一个类名, 使用动态class控制样式让其显示或隐藏, 监听其滚动页面, 判断滚动距离
- 显示条件: 当屏幕滚动距离大于78px的时候让其显示,小于78px则隐藏
代码实现:
- 安装@vueuse/core 包,它封装了常见的一些交互逻辑
https://vueuse.org/core/useWindowScroll/
npm install @vueuse/core
- 使用, 基于vue3x
<template>
<div class="app-header-sticky" :class="{show: showNav}">
</template>
<script>
import { useWindowScroll } from '@vueuse/core'
import { ref, watch } from 'vue'
export default {
setup() {
const show = ref(false) // 默认不显示
const { x, y } = useWindowScroll() // x,y 轴
watch: (y, (oldVal, newVal) => { // 监听变化,做出判断
newVal > 78 ? show.value = true : show.value = false
})
return { show, y }
}
}
</script>
注意: setup只会在组件创建时执行一次, 我们需要使用watch监听其数据变化
- 使用vue2x 版本实现
<template>
<div class="app-header-sticky" :class="{show: showNav}">
</template>
<script>
export default {
data() {
return {
show: false
}
},
mounted() {
// 监听页面滚动事件
window.addEventListener('scroll', () => {
const dist = document.documentElement.scrollTop // 页面滚动距离
dist > 78 ? this.show = true : this.show = flase
})
}
}
</script>