使用JQ完成div滑動到一個位置開始固定
阿新 • • 發佈：2019-01-24
這幾天做一個頁面，用到div滑動到一定的位置然後固定，查找了好久的資料才解決，這裡做一個總結。
下面我會貼出程式碼，程式碼中會詳細解釋，如果有不懂的可以給我留言。
注：
1、 單純的copy一下程式碼是看不到執行的效果的，需要在第一個div和最後一個div裡面新增足夠多的內容，直到頁面可以出現滾動效果才可以。
2、程式碼唯一要改的地方就是JQ核心檔案和新增足夠的div
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <!--引入JQuery核心js檔案--> <script type="text/javascript" src="js/jquery_js/jquery-1.11.3.min.js" ></script> <style> /*這個css樣式就是固定div的*/ .sfixed{ position:fixed; top: 1000px; left: 0px; z-index: 10; } .scroll{ margin-left: 200px; border: 1px red solid; width: 20%; height: 10px; } </style> <script> $(function(){ // 函式offset()的作用是返回呼叫者當前的位置 // 獲取你所要開始固定的位置 var top1 = $(".scroll").offset().top; $(window).scroll(function(){ // 動態獲取當前頁面的位置 var win_top = $(this).scrollTop(); // 動態獲取需要固定的div的位置 var top = $(".scroll").offset().top; // 把當前頁面位置和要固定div的位置想對比 // 如果頁面位置大於等於需要固定的div位置說明此時需要固定了，只需要給它新增一個css樣式即可 if(win_top >= top){ $(".scroll").addClass("sfixed"); } //把當前頁面位置和要固定div的位置想對比 // 如果頁面位置小於需要固定的div位置說明此時不需要固定，只需要給它移除之前新增的css樣式即可 if(win_top < top1){ $(".scroll").removeClass("sfixed"); } }); }); </script> <body> <div class="top"> <div> 內容1 </div> </div> <div class="scroll"> <!--這是需要固定的部分--> </div> <div class="bottom"> <div> 內容1 </div> </div> </body> </html>