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

发布了11 篇原创文章 · 获赞 2 · 访问量 743

猜你喜欢

转载自blog.csdn.net/qq_41589917/article/details/103911263