• 设为首页
  • 收藏本站
  • 积分充值
  • VIP赞助
  • 手机版
  • 微博
  • 微信
    微信公众号 添加方式：
    1:搜索微信号（888888）
    2:扫描左侧二维码
  • 登录 立即注册
    • 切换风格
    快捷导航
    福建二哥 › 门户 › 查看主题

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

    发布者: 涵韵 | 发布时间: 2025-8-16 21:32| 查看数: 75| 评论数: 0|帖子模式

    本文主要介绍了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/>


    24.         </div>
    25.     </div>
    26.     <div style="float: right; width: 750px; border: solid 1px gray; padding: 10px;">
    27.         <span>ssssssssssssssss</span><br>
    28.         <span>ssssssssssssssss</span><br>
    29.         <span>ssssssssssssssss</span><br>
    30.         <span>ssssssssssssssss</span><br>
    31.         <span>ssssssssssssssss</span><br>
    32.         <span>ssss我是内容ssss</span><br>
    33.         <span>ssssssssssssssss</span><br>
    34.         <span>sssssss我是内容sssssssss</span><br>
    35.         <span>ssssssssssssssss</span><br>
    36.         <span>sssssss我是内容sssssssss</span><br>
    37.         <span>ssssssssssssssss</span><br>
    38.         <span>ssssss我是内容ssssssssss</span><br>
    39.         <span>ssssssssssssssss</span><br>
    40.         <span>ssssssssssssssss</span><br><span>ssssss我是内容ssssssssss</span><br>
    41.         <span>ssssssssssssssss</span><br>
    42.         <span>ssssssssssssssss</span><br><span>ssssss我是内容ssssssssss</span><br>
    43.         <span>ssssssssssssssss</span><br>
    44.         <span>ssssssssssssssss</span><br><span>ssssss我是内容ssssssssss</span><br>
    45.         <span>ssssssssssssssss</span><br>
    46.         <span>ssssssssssssssss</span><br><span>ssssss我是内容ssssssssss</span><br>
    47.         <span>ssssssssssssssss</span><br>
    48.         <span>ssssssssssssssss</span><br><span>ssssss我是内容ssssssssss</span><br>
    49.         <span>ssssssssssssssss</span><br>
    50.         <span>ssssssssssssssss</span><br><span>ssssss我是内容ssssssssss</span><br>
    51.         <span>ssssssssssssssss</span><br>
    52.         <span>ssssssssssssssss</span><br><span>ssssss我是内容ssssssssss</span><br>
    53.         <span>ssssssssssssssss</span><br>
    54.         <span>ssssssssssssssss</span><br><span>ssssss我是内容ssssssssss</span><br>
    55.         <span>ssssssssssssssss</span><br>
    56.         <span>ssssssssssssssss</span><br><span>ssssss我是内容ssssssssss</span><br>
    57.         <span>ssssssssssssssss</span><br>
    58.         <span>ssssssssssssssss</span><br><span>ssssss我是内容ssssssssss</span><br>
    59.         <span>ssssssssssssssss</span><br>
    60.         <span>ssssssssssssssss</span><br><span>ssssss我是内容ssssssssss</span><br>
    61.         <span>ssssssssssssssss</span><br>
    62.         <span>ssssssssssssssss</span><br><span>ssssss我是内容ssssssssss</span><br>
    63.         <span>ssssssssssssssss</span><br>
    64.         <span>ssssssssssssssss</span><br><span>ssssss我是内容ssssssssss</span><br>
    65.         <span>ssssssssssssssss</span><br>
    66.         <span>ssssssssssssssss</span><br><span>ssssss我是内容ssssssssss</span><br>
    67.         <span>ssssssssssssssss</span><br>
    68.         <span>ssssssssssssssss</span><br><span>ssssss我是内容ssssssssss</span><br>
    69.         <span>ssssssssssssssss</span><br>
    70.         <span>ssssssssssssssss</span><br><span>ssssss我是内容ssssssssss</span><br>
    71.         <span>ssssssssssssssss</span><br>
    72.         <span>ssssssssssssssss</span><br>

    74.     </div>
    75. </div>
    76. <script type="text/javascript">
    77.     function htmlScroll() {
    78.         var top = document.body.scrollTop || document.documentElement.scrollTop;
    79.         if (elFix.data_top < top) {
    80.             elFix.style.position = 'fixed';
    81.             elFix.style.top = 0;
    82.             elFix.style.left = elFix.data_left;
    83.         }
    84.         else {
    85.             elFix.style.position = 'static';
    86.         }
    87.     }

    89.     function htmlPosition(obj) {
    90.         var o = obj;
    91.         var t = o.offsetTop;
    92.         var l = o.offsetLeft;
    93.         while (o = o.offsetParent) {
    94.             t += o.offsetTop;
    95.             l += o.offsetLeft;
    96.         }
    97.         obj.data_top = t;
    98.         obj.data_left = l;
    99.     }

    101.     var oldHtmlWidth = document.documentElement.offsetWidth;
    102.     window.onresize = function () {
    103.         var newHtmlWidth = document.documentElement.offsetWidth;
    104.         if (oldHtmlWidth == newHtmlWidth) {
    105.             return;
    106.         }
    107.         oldHtmlWidth = newHtmlWidth;
    108.         elFix.style.position = 'static';
    109.         htmlPosition(elFix);
    110.         htmlScroll();
    111.     }
    112.     window.onscroll = htmlScroll;

    114.     var elFix = document.getElementById('div1');
    115.     htmlPosition(elFix);

    117. </script>
    118. </body>
    119. </html>
    复制代码
    到此这篇关于HTML 页面滚动时部分内容位置固定不滚动的实现的文章就介绍到这了,更多相关HTML 页面滚动内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

    来源：互联网
    免责声明：如果侵犯了您的权益，请联系站长（1277306191@qq.com），我们会及时删除侵权内容，谢谢合作！

    本帖子中包含更多资源

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

    ×

    最新评论

    新人须知

    常见问题

    维权申诉

    关注微博

    扫描微信

    关于合作

    通讯联系

    QQ Archiver 手机版 小黑屋 福建二哥 ( 闽ICP备2022004717号|闽公网安备35052402000345号 )

    Powered by Discuz! X3.5 © 2001-2023

    快速回复 返回顶部 返回列表