页面实现吸顶效果

最新推荐文章于 2024-08-20 11:29:48 发布

新之助9928

最新推荐文章于 2024-08-20 11:29:48 发布

阅读量372

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_46084100/article/details/125813036

版权

电商网站为提供便捷的分类切换，需要实现吸顶导航。当滚动距离超过78px时导航显示并固定在头部，否则隐藏。通过额外组件、监听滚动条和vueuse库的useWindowScroll实现这一功能，了解vueuse/core在vue3中的应用。

摘要由CSDN通过智能技术生成

实现背景:电商网站的首页内容会比较多，页面比较长，为了能让用户在滚动浏览内容的过程中都能够快速的切换到其它分类。需要分类导航一直可见，所以需要一个吸顶导航的效果。

目标:吸顶整体分析，总结基本步骤

交互要求:

滚动距离>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