页面滚动监听事件

最新推荐文章于 2024-07-29 08:14:57 发布

qq_36727889

最新推荐文章于 2024-07-29 08:14:57 发布

阅读量4.6k

点赞数 2

本文链接：https://blog.csdn.net/qq_36727889/article/details/90167491

版权

滚动监听事件

一般网页中的返回顶部按钮都是通过滚动监听事件来实现的
这个例子是当滚动条下拉到一定程度之后，某个元素中的所有内容都变成fixed
4444

css样式

		.fixed {
            position: fixed;
            top: 60px;
            right: 175px;
            width: 390px;
        }
        .abs {
            position: absolute;
            bottom: 18px;
            right: 0;
        }

js代码

window.onscroll=function () {
			//获取滚动条到顶部的距离
            var t=document.documentElement.scrollTop || document.body.scrollTop;
            //获取要操作元素的id
            var scrollUp=document.getElementById('right');
            //判断滚动条高度，设置事件
            if(t>300 && t<1986){
                scrollUp.classList.remove("abs");
                scrollUp.classList.add("fixed");
            }else if(t>1986){
                scrollUp.classList.remove("fixed");
                scrollUp.classList.add("abs");
            }else {
                scrollUp.classList.remove("fixed");
                scrollUp.classList.remove("abs");
            }
        }