如何讓 Div 滾動時固定在螢幕頂部？

如何在滾動時將Div 固定到螢幕頂部

滾動瀏覽網站時，您可能想要保留某些元素固定在螢幕頂部。為此，可以操縱位置和頂部等 CSS 屬性。

CSS 解：

您可以使用 CSS將元素固定在螢幕頂部使用固定定位：

.fixedElement {
    background-color: #c0c0c0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}

JavaScript解決方案：

為了更好地控制元素的行為，您可以使用JavaScript和scrollTop函數來檢測頁面的滾動抵消。以下是一個範例：

$(window).scroll(function(e){ 
  var $el = $('.fixedElement'); 
  var isPositionFixed = ($el.css('position') == 'fixed');
  if ($(this).scrollTop() > 200 && !isPositionFixed){ 
    $el.css({'position': 'fixed', 'top': '0px'}); 
  }
  if ($(this).scrollTop() < 200 &amp;&amp; isPositionFixed){
    $el.css({'position': 'static', 'top': '0px'}); 
  } 
});

在這段程式碼中，當滾動偏移量超過200 像素時，元素的位置將變更為固定，當偏移量低於200 像素時，元素將返回其原始位置並不再固定在頂部。

以上是如何讓 Div 滾動時固定在螢幕頂部？的詳細內容。更多資訊請關注PHP中文網其他相關文章！