問題：
你有最初距離頁面頂部100 像素的div，包含基本按鈕或控制項。當用戶向下捲動經過此 div 時，您希望它「黏在」螢幕頂部以便於存取。當用戶向上滾動時，你希望它回到原來的位置。
解決方案：
秘訣在於利用position:fixed屬性，但只能在事後使用者已捲動經過該 div。以下是實現此目的的方法：
JavaScript:
<code class="javascript">var $window = $(window),
$stickyEl = $('#the-sticky-div'),
elTop = $stickyEl.offset().top;
$window.scroll(function() {
$stickyEl.toggleClass('sticky', $window.scrollTop() > elTop);
});</code>此程式碼擷取視窗的捲動事件，並在使用者捲動過去時動態套用「黏性」 CSS 類別div 的頂部。
CSS:
<code class="css">#the-sticky-div.sticky {
position: fixed;
top: 0;
}</code>此 CSS 設定「黏性」類別以使 div 黏附在螢幕頂部。預設情況下，position:fixed 相對於視窗放置 div，確保它在整個滾動過程中保持在頂部。
工作原理：
頁面載入時， div 的位置距頂部 100px。當使用者向下捲動時，JavaScript 檢查目前捲動位置是否超過 div 的初始頂部位置。如果是這樣，它會將“sticky”類別應用於 div，使其固定在螢幕頂部。當使用者向上捲動時，過程相反，並且「黏性」類別被刪除，允許 div 恢復其初始位置。
總而言之，此解決方案有效地使 div “粘住”到當用戶滾動經過它時，它會顯示在屏幕頂部，而當用戶向上滾動時，它會返回到其原始位置。
以上是如何使 Div 在滾動經過它時'粘”到屏幕頂部？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
