源码论坛公告:本站是一个交流学习建站资源的社区论坛,旨在交流学习源码脚本等资源技术,欢迎大家投稿发言! 【点击此处将锦尚放在桌面

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

 找回密码
 会员注册

QQ登录

只需一步,快速开始

查看: 3302|回复: 0

[JavaScript] JS实现div随屏幕滚动到一定高度后固定的代码

[复制链接]

3123

主题

3525

帖子

14万

金币

超级版主

Rank: 8Rank: 8

积分
287186
发表于 2023-4-11 00:30:28 | 显示全部楼层 |阅读模式

直接给出代码,大家复制到本地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随屏幕滚动到一定高度后固定的代码就介绍到这,感谢大家的支持与厚爱,更多内容请搜索锦尚中国获取!

您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

锦尚中国源码论坛

聚合标签|锦尚中国,为中国网站设计添动力 ( 鲁ICP备09033200号 ) |网站地图

GMT+8, 2024-12-12 03:42 , Processed in 0.105276 second(s), 25 queries .

带宽由 锦尚数据 提供 专业的数据中心

© 锦尚中国源码论坛 52jscn Inc. 非法入侵必将受到法律制裁 法律顾问:IT法律网 & 褚福省律师 锦尚爱心 版权申诉 版权与免责声明