vue中吸顶效果

最新推荐文章于 2023-06-21 11:42:54 发布

原创最新推荐文章于 2023-06-21 11:42:54 发布 · 290 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

这段代码展示了如何在页面滚动时监听滚动事件，并根据滚动位置改变元素的固定定位状态。当滚动距离超过特定值时，元素变为固定定位；否则，恢复原始状态。这常用于实现侧边栏或顶部导航的吸顶效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

   mounted() {
        window.addEventListener("scroll", this.handleScroll);
    },
    destoryed() {
        window.removeEventListener("scroll", this.handleScroll);
    },
  methods:{
      handleScroll() {
            var st =
                window.pageYOffset ||
                document.documentElement.scrollTop ||
                document.body.scrollTop;
            // let offsetTop = document.querySelector("#fixed").offsetTop;(固定之前不变)180(px)
            //不可直接用offsetTop与st对比,因为固定定位后offsetTop始终为0
            180 < st ? (this.isfixed = true) : (this.isfixed = false);
        },
    },}
    ```