1.返回html文档元素
document.documentElement
2.文档的高度
document.body.clientHeight
3.html文档可视高度==页面可见区域的高度
document.documentElement.clientHeight
4.获取元素距离文档顶部的距离
document.querySelector('.a').offsetTop
5.获取元素距离可视区域顶部的距离(测试有偏差)left,bottom,right,分别距离页面左边,下边,右边
document.querySelector('.a').getBoundingClientRect().top
6.滚动条距离文档顶端的距离
document.documentElement.scrollTop
这是吸底的,吸顶把判断条件改成:sh < 200 200就是滚动条滑动多少距离开始吸顶
(代码可复制直接看效果,因为谷歌每次滚动距离正负100,所以效果可能没那么好,如果有什么好方法,麻烦指教)
*{margin: 0;padding: 0} .con{ 100px;height: 200px;border: 1px solid lime} .a{ 100%;height: 100px;background: lime;} .scroll_avtive{position: fixed;left: 0;bottom: 0;}
<div class="con"></div> <div class="con"></div> <div class="con"></div> <div class="con"></div> <div class="con"></div> <div class="con"></div> <div class="con"></div> <div class="con"></div> <div class="con"></div> <div class="con"></div> <div class="a scroll_avtive"></div> <!--固定元素,其他div只为显示出滚动条--> <div class="foot con"></div>
// 获取吸顶元素的高度,并转化为整数 let fixedElH = parseInt(getComputedStyle(document.querySelector('.foot'),null).height) // 获取文档高度 let dh = document.body.clientHeight //获取可视区域的高度 let vh = document.documentElement.clientHeight //获取固定元素 let a = document.querySelector('.a') let scrollFunc=function(e){ //获取滚动条滚动距离 let sh = document.documentElement.scrollTop||document.body.scrollTop; // event事件兼容写法 e=e || window.event; ////IE/Opera/Chrome浏览器使用的是wheelDelta,并且值为“正负120”(使用chrome是正负100) console.log(sh) if(e.wheelDelta){ // document.documentElement.scrollTop+=50 if(dh-sh < vh+fixedElH){ a.classList.remove('scroll_avtive') }else{ a.classList.add('scroll_avtive') } //Firefox }else if(e.detail){ } } if(document.addEventListener){ document.addEventListener('DOMMouseScroll',scrollFunc,false); }//W3C //IE/Opera/Chrome window.onmousewheel=document.onmousewheel=scrollFunc;