HTML页面滚动时部分内容位置固定不滚动的实现
2021-06-06 04:12
1531 查看
本文主要介绍了HTML页面滚动时部分内容位置固定不滚动,对布局有一定的帮助作用,废话不多说,具体如下:
效果截图:
页面源代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <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;"> 我不滚动<br/> 你看我<br/><br/> 我不滚动<br/> 你看我<br/><br/> 我不滚动<br/> 你看我<br/><br/> 我不滚动<br/> 你看我<br/><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>ssss我是内容ssss</span><br> <span>ssssssssssssssss</span><br> <span>sssssss我是内容sssssssss</span><br> <span>ssssssssssssssss</span><br> <span>sssssss我是内容sssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssss我是内容ssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br><span>ssssss我是内容ssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br><span>ssssss我是内容ssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br><span>ssssss我是内容ssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br><span>ssssss我是内容ssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br><span>ssssss我是内容ssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br><span>ssssss我是内容ssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br><span>ssssss我是内容ssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br><span>ssssss我是内容ssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br><span>ssssss我是内容ssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br><span>ssssss我是内容ssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br><span>ssssss我是内容ssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br><span>ssssss我是内容ssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br><span>ssssss我是内容ssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br><span>ssssss我是内容ssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br><span>ssssss我是内容ssssssssss</span><br> <span>ssssssssssssssss</span><br> <span>ssssssssssssssss</span><br><span>ssssss我是内容ssssssssss</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 页面滚动时部分内容位置固定不滚动的实现的文章就介绍到这了,更多相关HTML 页面滚动内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
相关文章推荐
- JS实现部分HTML固定页面顶部随屏滚动效果
- JS实现部分HTML固定页面顶部随屏滚动效果
- Study Html《如何让DIV固定在页面的某个位置而不随着滚动条随意滚动》
- HTML页面上面固定下面滚动的实现
- js实现html页面滚动条向下拉到一定的程度时,某个div就固定在顶部,向上拉时返回原位置。
- HTML实现左侧内容可滚动,右侧列表固定布局
- HTMLCSS实现左侧固定宽度右侧内容可滚动
- 使用css实现页面头部固定,下面随着内容的增多滚动,但是头部不动的效果
- JS实现随页面滚动显示/隐藏窗口固定位置元素
- HTML 固定div于页面固定位置,实现悬浮按钮。
- html 页面太长滚动时,固定页面菜单标签,或者导航标签的位置,fixed/stickUp the position
- 顶部固定 页面内容部分可以滚动
- 页面头部和左侧固定并撑满,只有右侧部分内容改变的布局实现
- JS实现随页面滚动显示/隐藏窗口固定位置元素
- HTML中 css实现滚动页面时固定页面其中一栏的效果
- jquery实现div层随页面滚动而滚动(固定在某一位置)
- html页面中,表格数据可以固定表头,表数据部分做滚动条显示,如何实现
- JS 侧栏导航点击定位页面内容位置及滚动条滚动改变导航元素对应状态
- 打印html页面部分内容
- css特效实现html表格显示部分内容,当鼠标移上去显示全部。