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

标题: 页面向下滚动到指定位置,div固定在最顶部的jQuery代码 [打印本页]
作者: 洪七公    时间: 2022-5-6 23:30
标题: 页面向下滚动到指定位置,div固定在最顶部的jQuery代码
简单粗暴有效的代码，有了这个代码别的地方不需要看了，可美化度很高！

直接上代码吧！




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



  9. <div style=" height:350px; background-color:#0000FF"></div>
  10. <ul id="nav" style="height:60px;background:#0F9;position:absolute;width:100%;">
  11.                 123456
  12. </ul>
  13. <div style=" height:350px; background-color:#0000FF; margin-top:60px;">123456789</div>
  14. <div style=" height:300px; background-color: #FF0000">123456789</div>
  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. <br>
  98. <br>
  99. <br>
  100. <br>


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


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

(, 下载次数: 2)





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