使用CSS、HTML 和jQuery 修復滾動上的標題

創建一個在頁面向下滾動時保持固定的標題是共同的設計要求。這可以使用 CSS、HTML 和 JavaScript (jQuery) 的組合來實現。

使用 CSS 實現，HTML

CSS 提供了位置：固定；屬性，可以應用於元素以固定其在頁面上的位置，無論滾動如何。然而，這需要一個觸發點來確定元素何時應該固定。

JavaScript 的角色 (jQuery)

需要 JavaScript 來監視滾動事件並決定何時將固定類別應用於標頭元素。使用 jQuery，可以編寫一個簡單的腳本來偵測滾動事件並相應地新增或刪除固定類別。

HTML 代碼

CSS代碼

.fixed {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
}

jQuery 程式碼

$(window).scroll(function(){
  var sticky = $('.sticky'),
      scroll = $(window).scrollTop();

  if (scroll >= 100) sticky.addClass('fixed');
  else sticky.removeClass('fixed');
});

在此範例中，當捲動位置 (scrollTop) 超過 100 像素時，固定類別將套用於黏性元素。您可以根據您的具體設計需求調整該數值。

擴充範例：動態觸發點

如果固定元素的觸發點未知，可以使用offset().top.

var stickyOffset = $('.sticky').offset().top;

$(window).scroll(function(){
  var sticky = $('.sticky'),
      scroll = $(window).scrollTop();

  if (scroll >= stickyOffset) sticky.addClass('fixed');
  else sticky.removeClass('fixed');
});

此程式碼動態測量黏性元素的垂直位置，並在到達視窗頂部時進行修復。

透過結合這些技術，您可以使用以下方法建立黏性標題CSS、HTML 和 jQuery。