首页 > 代码库 > HTML滚动时位置固定
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>
HTML滚动时位置固定
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。