vue中吸顶效果

最新推荐文章于 2025-02-18 14:51:47 发布

原创最新推荐文章于 2025-02-18 14:51:47 发布 · 337 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue

收录于

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

   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);
        },
    },}
    ```