HTML滚动时位置固定
现在显示器一般都是宽屏,网页两端常常会留白。
两边可能会放一些推荐、标签或是导航什么的辅助模块。
现在有的网站页面内容过长时,用户将滚动条向下拉时,拉到一定程度,左右两侧的辅助模块就会固定在指定位置,不随滚动条滚动。这个的体验很好。
试着自己写了一个。
原理很简单,就是使用JS计算当滚动条位置大于元素显示位置时,将元素设置为 position:fixed; 设置好top,left这样就固定好位置了。
<!DOCTYPE html> <html> <head> <title>无标题页</title> </head> <body style="width: 900px; margin: 0px auto; line-height: 23px; padding: 10px;"> <div> <div style="float: left; width: 120px;"> <div> 滚动内容区域<br /> 滚动内容区域<br /> 滚动内容区域<br /> 滚动内容区域<br /> </div> <div id="div1" style="border: solid 1px gray; width: 90px; padding: 10px; background-color: #eff;"> fix内容区域<br /> fix内容区域<br /> fix内容区域<br /> fix内容区域<br /> fix内容区域<br /> fix内容区域<br /> fix内容区域<br /> fix内容区域<br /> fix内容区域<br /> fix内容区域<br /> fix内容区域<br /> </div> </div> <div style="float: right; width: 750px; border: solid 1px gray; padding: 10px;"> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br> </div> </div> <script type="text/javascript"> function htmlScroll() { var top = document.body.scrollTop || document.documentElement.scrollTop; if (elFix.data_top < top) { elFix.style.position = 'fixed'; elFix.style.top = 0; elFix.style.left = elFix.data_left; } else { elFix.style.position = 'static'; } } function htmlPosition(obj) { var o = obj; var t = o.offsetTop; var l = o.offsetLeft; while (o = o.offsetParent) { t += o.offsetTop; l += o.offsetLeft; } obj.data_top = t; obj.data_left = l; } var oldHtmlWidth = document.documentElement.offsetWidth; window.onresize = function () { var newHtmlWidth = document.documentElement.offsetWidth; if (oldHtmlWidth == newHtmlWidth) { return; } oldHtmlWidth = newHtmlWidth; elFix.style.position = 'static'; htmlPosition(elFix); htmlScroll(); } window.onscroll = htmlScroll; var elFix = document.getElementById('div1'); htmlPosition(elFix); </script> </body> </html>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器