实现背景:电商网站的首页内容会比较多,页面比较长,为了能让用户在滚动浏览内容的过程中都能够快速的切换到其它分类。需要分类导航一直可见,所以需要一个吸顶导航的效果。
目标:吸顶整体分析,总结基本步骤
交互要求:
- 滚动距离>78px就显示固定定位在头部位置
- 滚动距离<78px就隐藏
分析:
步骤:
- 额外制作一个组件,固定定位在头部位置,默认情况下是隐藏
- 监听滚动条的位置,决定这个组件的显示 or 隐藏
给window注册scroll事件,获取滚动距离
<script lang="ts" setup name="AppHeaderSticky">
import AppHeaderNav from './AppHeaderNav.vue'
import { onBeforeUnmount, onMounted, ref } from 'vue'
const y = ref(0)
const onScroll = () => {
y.value = document.documentElement.scrollTop
console.log(y.value)
}
onMounted(() => {
window.addEventListener('scroll', onScroll)
})
onBeforeUnmount(() => {
window.removeEventListener('scroll', onS