Jquery頁面滾動條向下拉到div的位置時，此div就固定在頂部，向上拉時返回原位置
阿新 • • 發佈：2019-01-08
Div在網頁開啟時固定在某個位置（不一定是網頁的最頂端），當滾動條向下滾動時，頁面的頂部到達此div位置後，此div就固定在網頁的最頂部跟隨移動，當滾動條向上滾動時，頁面頂部高過此div原來的固定位置，此div就定在原位置不再跟隨滾動條移動（相當於返回原來的位置）。
網上找了下，有很多方法，但像我這麼懶的人，感覺他們的實現方式有些麻煩或者程式碼有些多，看起來也不是那麼讓人一眼就能理解，自己經過多次實踐得出一種很簡潔的方式，發出來以做備份。
<head> <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script> <script type="text/javascript"> window.onload = function () { var pos = $('#div1').offset();// offset() 獲得div1當前的位置，左上角座標(x,y) $(window).scroll(function () { //滾動條滾動事件 if ($(this).scrollTop() > pos.top ) { $('#div1').css('width', '100px').css('top', $(this).scrollTop() - pos.top); } else if ($(this).scrollTop() <= pos.top ) { $('#div1').css('width', '100x').css('top',0).css('position', 'relative'); } }) }; </script> </head> <body> <div id="div1" style="width:100px"> 我就是要跟著滾動條移動的div. </div> </body>