源码论坛,商业源码下载,尽在锦尚中国商业源码论坛

标题: JS实现div随屏幕滚动到一定高度后固定的代码 [打印本页]

作者: 洪七公    时间: 2023-4-11 00:30
标题: JS实现div随屏幕滚动到一定高度后固定的代码

直接给出代码,大家复制到本地html文档内预览一下效果就知道了!

这个是可以放置在任何场景使用的,最常见的就是左侧导航或者广告,右侧是内容页,内容不断下拉,左侧位置固定跟随!

直接给出代码:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <style type="text/css">
  6.         body{
  7.             width:40em;
  8.             margin:0 auto;
  9.         }
  10.         article{
  11.             float:left;
  12.         }
  13.         aside{
  14.             float:right;
  15.         }
  16.         p{
  17.             line-height:3em;
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22. <article>
  23.     <p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>内容</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p>
  24. </article>
  25. <aside>
  26.     <p>这里会滚动</p><p>这里会滚动</p><p>这里会滚动</p>
  27.     <div id="fixPara"><p>这个段落到达一定高度会固定</p></div>
  28. </aside>
  29. <script type="text/javascript">
  30.     window.onload=
  31.         function(){
  32.             var oDiv = document.getElementById("fixPara"),
  33.                 H = 0,
  34.                 Y = oDiv        
  35.             while (Y) {
  36.                 H += Y.offsetTop;
  37.                 Y = Y.offsetParent;
  38.             }
  39.             window.onscroll = function()
  40.             {
  41.                 var s = document.body.scrollTop || document.documentElement.scrollTop
  42.                 if(s>H) {
  43.                     oDiv.style = "position:fixed;top:0;"
  44.                 } else {
  45.                     oDiv.style = ""
  46.                 }
  47.             }
  48.         }
  49. </script>
  50. </body>
  51. </html>
复制代码

剖析来看,实际最重要的div要设置一个id=fixPara,然后实现起来就非常方便灵活了!

好了,关于JS实现div随屏幕滚动到一定高度后固定的代码就介绍到这,感谢大家的支持与厚爱,更多内容请搜索锦尚中国获取!






欢迎光临 源码论坛,商业源码下载,尽在锦尚中国商业源码论坛 (https://bbs.52jscn.com/) Powered by Discuz! X3.3