JS判断滚动条距离底部的距离,将代码复制本地运行即可看到效果;
当实现一个元素需要参照底部计算的效果时,可参考一下代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>滚动条距离底部的距离</title> </head> <body> <div class="box"> <div style="height:10000px;"></div> </div> <script> window.addEventListener('scroll',function(){ console.log("目前滚动条和最上方的距离多长:",document.documentElement.scrollTop); console.log("整个滚动条多长:",document.documentElement.scrollHeight); console.log("网页可见区域:",document.documentElement.clientHeight); console.log("距离底部距离多长:",document.documentElement.scrollHeight - document.documentElement.scrollTop - document.documentElement.clientHeight); }) </script> </body> </html>
示例:
$(function(){ $(window).scroll(function() { var scrollBottom = document.documentElement.scrollHeight - document.documentElement.scrollTop - document.documentElement.clientHeight; console.log(scrollBottom); if(scrollBottom < 329){ // 当滚动条距离底部指定距离时 $('.right-article .fixed').css({'position':'absolute'}) }else{ $('.right-article .fixed').css({'position':'fixed'}) } }) })
原文链接:HelloWeb前端网 » JS判断滚动条距离底部的距离 » 感谢您的浏览,希望能有所帮助。
欢迎您加入“Helloweb” 学习交流群:
196291215 共同交流并结识同行,在这里说出您的收获与感想或有什么不同的观点,我们期待您的留言,分享,让我们一起进步!