中国红客联盟国际站联盟介绍联盟架构联盟文化联盟事记联盟邮箱购买特权捐助我们收藏本站
请登录
立即注册
首页Portal
资讯
圈子Group
贡献榜
关于我们
红客起源事记
搜索
当前位置:»交流社区 › 中国红客联盟【技术分享区】 › 编程代码交流 › HTML页面滚动时部分内容位置固定不滚动的实现 ...

[前端] HTML页面滚动时部分内容位置固定不滚动的实现

1647 0
Honkers 2022-10-19 15:38:12 | 显示全部楼层 |阅读模式
本文主要介绍了HTML页面滚动时部分内容位置固定不滚动，对布局有一定的帮助作用，废话不多说，具体如下：
效果截图：


页面源代码：
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>无标题页</title>
  6. </head>
  7. <body style="width: 900px; margin: 0px auto; line-height: 23px; padding: 10px;">
  8. <div>
  9.     <div style="float: left; width: 120px;">
  10.         <div>
  11.             我会滚动<br/>
  12.             滚动内容区域<br/>
  13.             滚动内容区域<br/>
  14.             滚动内容区域<br/>
  15.         </div>
  16.         <div id="div1" style="border: solid 1px gray; width: 90px; padding: 10px; background-color: #eff;">
  17.             我不滚动<br/>
  18.             你看我<br/><br/> 我不滚动<br/>
  19.             你看我<br/><br/> 我不滚动<br/>
  20.             你看我<br/><br/> 我不滚动<br/>
  21.             你看我<br/><br/>
  23.         </div>
  24.     </div>
  25.     <div style="float: right; width: 750px; border: solid 1px gray; padding: 10px;">
  26.         <span>ssssssssssssssss</span><br>
  27.         <span>ssssssssssssssss</span><br>
  28.         <span>ssssssssssssssss</span><br>
  29.         <span>ssssssssssssssss</span><br>
  30.         <span>ssssssssssssssss</span><br>
  31.         <span>ssss我是内容ssss</span><br>
  32.         <span>ssssssssssssssss</span><br>
  33.         <span>sssssss我是内容sssssssss</span><br>
  34.         <span>ssssssssssssssss</span><br>
  35.         <span>sssssss我是内容sssssssss</span><br>
  36.         <span>ssssssssssssssss</span><br>
  37.         <span>ssssss我是内容ssssssssss</span><br>
  38.         <span>ssssssssssssssss</span><br>
  39.         <span>ssssssssssssssss</span><br><span>ssssss我是内容ssssssssss</span><br>
  40.         <span>ssssssssssssssss</span><br>
  41.         <span>ssssssssssssssss</span><br><span>ssssss我是内容ssssssssss</span><br>
  42.         <span>ssssssssssssssss</span><br>
  43.         <span>ssssssssssssssss</span><br><span>ssssss我是内容ssssssssss</span><br>
  44.         <span>ssssssssssssssss</span><br>
  45.         <span>ssssssssssssssss</span><br><span>ssssss我是内容ssssssssss</span><br>
  46.         <span>ssssssssssssssss</span><br>
  47.         <span>ssssssssssssssss</span><br><span>ssssss我是内容ssssssssss</span><br>
  48.         <span>ssssssssssssssss</span><br>
  49.         <span>ssssssssssssssss</span><br><span>ssssss我是内容ssssssssss</span><br>
  50.         <span>ssssssssssssssss</span><br>
  51.         <span>ssssssssssssssss</span><br><span>ssssss我是内容ssssssssss</span><br>
  52.         <span>ssssssssssssssss</span><br>
  53.         <span>ssssssssssssssss</span><br><span>ssssss我是内容ssssssssss</span><br>
  54.         <span>ssssssssssssssss</span><br>
  55.         <span>ssssssssssssssss</span><br><span>ssssss我是内容ssssssssss</span><br>
  56.         <span>ssssssssssssssss</span><br>
  57.         <span>ssssssssssssssss</span><br><span>ssssss我是内容ssssssssss</span><br>
  58.         <span>ssssssssssssssss</span><br>
  59.         <span>ssssssssssssssss</span><br><span>ssssss我是内容ssssssssss</span><br>
  60.         <span>ssssssssssssssss</span><br>
  61.         <span>ssssssssssssssss</span><br><span>ssssss我是内容ssssssssss</span><br>
  62.         <span>ssssssssssssssss</span><br>
  63.         <span>ssssssssssssssss</span><br><span>ssssss我是内容ssssssssss</span><br>
  64.         <span>ssssssssssssssss</span><br>
  65.         <span>ssssssssssssssss</span><br><span>ssssss我是内容ssssssssss</span><br>
  66.         <span>ssssssssssssssss</span><br>
  67.         <span>ssssssssssssssss</span><br><span>ssssss我是内容ssssssssss</span><br>
  68.         <span>ssssssssssssssss</span><br>
  69.         <span>ssssssssssssssss</span><br><span>ssssss我是内容ssssssssss</span><br>
  70.         <span>ssssssssssssssss</span><br>
  71.         <span>ssssssssssssssss</span><br>
  73.     </div>
  74. </div>
  75. <script type="text/javascript">
  76.     function htmlScroll() {
  77.         var top = document.body.scrollTop || document.documentElement.scrollTop;
  78.         if (elFix.data_top < top) {
  79.             elFix.style.position = 'fixed';
  80.             elFix.style.top = 0;
  81.             elFix.style.left = elFix.data_left;
  82.         }
  83.         else {
  84.             elFix.style.position = 'static';
  85.         }
  86.     }
  88.     function htmlPosition(obj) {
  89.         var o = obj;
  90.         var t = o.offsetTop;
  91.         var l = o.offsetLeft;
  92.         while (o = o.offsetParent) {
  93.             t += o.offsetTop;
  94.             l += o.offsetLeft;
  95.         }
  96.         obj.data_top = t;
  97.         obj.data_left = l;
  98.     }
  100.     var oldHtmlWidth = document.documentElement.offsetWidth;
  101.     window.onresize = function () {
  102.         var newHtmlWidth = document.documentElement.offsetWidth;
  103.         if (oldHtmlWidth == newHtmlWidth) {
  104.             return;
  105.         }
  106.         oldHtmlWidth = newHtmlWidth;
  107.         elFix.style.position = 'static';
  108.         htmlPosition(elFix);
  109.         htmlScroll();
  110.     }
  111.     window.onscroll = htmlScroll;
  113.     var elFix = document.getElementById('div1');
  114.     htmlPosition(elFix);
  116. </script>
  117. </body>
  118. </html>
复制代码
到此这篇关于HTML 页面滚动时部分内容位置固定不滚动的实现的文章就介绍到这了,更多相关HTML 页面滚动内容请搜索中国红客联盟以前的文章或继续浏览下面的相关文章，希望大家以后多多支持中国红客联盟！

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

×
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Honkers

特级红客

关注
  • 3136
    主题
  • 36
    粉丝
  • 0
    关注
这家伙很懒，什么都没留下！

中国红客联盟公众号

联系站长QQ：5520533

admin@chnhonker.com
Copyright © 2001-2025 Discuz Team. Powered by Discuz! X3.5 ( 粤ICP备13060014号 )|天天打卡 本站已运行天