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

功能描述:滚动时获知距离顶部的高度(如下)

监听滚动事件,实现元素吸顶或者固定位置--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里或子组件里滚动

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

 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

监听滚动事件,实现元素吸顶或者固定位置--vue监听滚动事件,实现元素吸顶或者固定位置--vue 北漂女程序媛的修炼笔记 发布了10 篇原创文章 · 获赞 1 · 访问量 572 私信 关注
上一篇:js上下滚动监控


下一篇:Codeforces 1120 简要题解