js 吸顶以及一些获取文档高度等小方法
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{width: 100px;height: 200px;border: 1px solid lime} .a{width: 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;
本文来自博客园,作者:时光凉忆,转载请注明原文链接:https://www.cnblogs.com/naturl/p/10905666.html
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)