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

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

 找回密码
 会员注册

QQ登录

只需一步,快速开始

查看: 7433|回复: 0

[CSS/Html] 页面向下滚动到指定位置,div固定在最顶部的jQuery代码

[复制链接]

3106

主题

3507

帖子

13万

金币

超级版主

Rank: 8Rank: 8

积分
275673
发表于 2022-5-6 23:30:20 | 显示全部楼层 |阅读模式
简单粗暴有效的代码,有了这个代码别的地方不需要看了,可美化度很高!

直接上代码吧!




  1. <style type="text/css">
  2. *{ margin:0 0 0 0;}
  3. </style>
  4. <script src="js/jquery-1.11.3.min.js"></script>



  5. <div style=" height:350px; background-color:#0000FF"></div>
  6. <ul id="nav" style="height:60px;background:#0F9;position:absolute;width:100%;">
  7.                 123456
  8. </ul>
  9. <div style=" height:350px; background-color:#0000FF; margin-top:60px;">123456789</div>
  10. <div style=" height:300px; background-color: #FF0000">123456789</div>
  11. <br>
  12. <br>
  13. <br>
  14. <br>
  15. <br>
  16. <br>
  17. <br>
  18. <br>
  19. <br>
  20. <br>
  21. <br>
  22. <br>
  23. <br>
  24. <br>
  25. <br>
  26. <br>
  27. <br>
  28. <br>
  29. <br>
  30. <br>
  31. <br>
  32. <br>
  33. <br>
  34. <br>
  35. <br>
  36. <br>
  37. <br>
  38. <br>
  39. <br>
  40. <br>
  41. <br>
  42. <br>
  43. <br>
  44. <br>
  45. <br>
  46. <br>
  47. <br>
  48. <br>
  49. <br>
  50. <br>
  51. <br>
  52. <br>
  53. <br>
  54. <br>
  55. <br>
  56. <br>
  57. <br>
  58. <br>
  59. <br>
  60. <br>
  61. <br>
  62. <br>
  63. <br>
  64. <br>
  65. <br>
  66. <br>
  67. <br>
  68. <br>
  69. <br>
  70. <br>
  71. <br>
  72. <br>
  73. <br>
  74. <br>
  75. <br>
  76. <br>
  77. <br>
  78. <br>
  79. <br>
  80. <br>
  81. <br>
  82. <br>
  83. <br>
  84. <br>
  85. <br>
  86. <br>
  87. <br>
  88. <br>
  89. <br>
  90. <br>
  91. <br>
  92. <br>
  93. <br>
  94. <br>
  95. <br>
  96. <br>


  97. <script>
  98. $(function(){
  99.         var a = $('#nav'),
  100.                 b =a.offset();
  101.         $(document).on('scroll',function(){
  102.                 var        c = $(document).scrollTop();
  103.                 if(b.top<=c){
  104.                         a.css({'position':'fixed','top':'0px'})
  105.                         }else{
  106.                                 a.css({'position':'absolute','top':'350px'})
  107.                                 }
  108.                 })
  109.         })
  110. </script>
复制代码


注意:该div的头部设置了多高,那就在js代码中修改a.css的top样式,我把代码也打包了,大家可以直接下载

下载地址
您已购买

金币

云主机产品:idc.52jscn.com   站长服务:help.52jscn.com   微信魔方:mofang.52jscn.com定制开发


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

本版积分规则

锦尚中国源码论坛

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

GMT+8, 2024-6-22 05:25 , Processed in 0.107099 second(s), 30 queries .

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

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