监听滚动事件，实现元素吸顶或者固定位置--vue

功能描述：滚动时获知距离顶部的高度（如下）

提示：谁滚动监听谁

可能一：若是body页面滚动

 methods: {
            handleTabFix() {
                var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
                // console.log(scrollTop);
           
            }
        },
        // 监听页面滚动
        mounted () {
            window.addEventListener('scroll', this.handleTabFix, true)
        
        },
    }

可能二：若是一个div里或子组件里滚动

 methods: {
           handleTabFix() {
               var offsetTop = document.getElementsByClassName('s111')[0].scrollTop 
               console.log("距离顶部"+offsetTop);
           }
       },
       // 监听页面滚动
       mounted () {
           window.addEventListener('scroll', this.handleTabFix, true)
       },

若console出来的结果是0，请换另一种方法，若两种方法都无效请下方留言
若要看它是如何在子组件里滚动请看https://blog.csdn.net/qq_41589917/article/details/103895534

• 点赞
• 收藏
• 分享
• • 文章举报

北漂女程序媛的修炼笔记 发布了10 篇原创文章 · 获赞 1 · 访问量 572 私信 关注

标签：vue,handleTabFix,console,window,scrollTop,滚动,吸顶,监听
来源： https://blog.csdn.net/qq_41589917/article/details/103911263