如何使用 CSS 和 JavaScript 將標題固定在頁面頂部？

如何使用CSS 和JavaScript 創建粘性標題

問題：

設計標題，一旦用戶滾動頁面上的特定點。是否可以使用 CSS 和 HTML 來實現此目的，還是需要 JavaScript？

使用CSS 和JavaScript 的解決方案：

要使用CSS 和JavaScript 建立黏性標題，請按照以下步驟操作：

1. HTML: 新增
   具有「sticky」類別的元素到要顯示標題的頁面。

2. CSS: 定義一個名為“fixed”的CSS 類，具有以下屬性：

   • 位置：固定；
   • 上：0；
   • 左：0；
   • 寬度：100%；

3. JavaScript (jQuery): 使用下列JavaScript 程式碼將捲動事件處理程序附加到視窗物件：

   <code class="js">$(window).scroll(function() {
     var sticky = $('.sticky'),
         scroll = $(window).scrollTop();
   
     if (scroll >= 100) {
       sticky.addClass('fixed');
     } else {
       sticky.removeClass('fixed');
     }
   });</code>

擴充範例：

如果黏性標題的觸發點未知，可以使用.offset().top 方法來確定黏性元素何時到達螢幕頂部。這是更新後的JavaScript 程式碼：

<code class="js">var stickyOffset = $('.sticky').offset().top;

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

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

範例小提琴：

• 基本範例：http://jsfiddle.net/gxRC9/501/
• 擴充範例：http://jsfiddle.net/gxRC9/502/

這種方法可讓您使用CSS 和JavaScript 的組合建立黏性標題，使其跨瀏覽器相容且相對容易實現。