如何使用 CSS、HTML 和 jQuery 建立黏性標題？-css教學-PHP中文網

如何使用 CSS、HTML 和 jQuery 建立黏性標題？

Susan Sarandon

發布： 2024-10-29 04:34:02

原創

299 人瀏覽過

How to Create a Sticky Header with CSS, HTML, and jQuery?

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

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

使用 CSS、HTML 實作

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

JavaScript (jQuery) 的角色

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

HTML 程式碼

<code class="html"><div class="sticky"></div></code>

登入後複製

CSS 程式碼

<code class="css">.fixed {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
}</code>

登入後複製

<code class="javascript">$(window).scroll(function(){
  var sticky = $('.sticky'),
      scroll = $(window).scrollTop();

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

登入後複製

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

擴充範例：動態觸發點

如果修復元素的觸發點未知，可以是使用 offset().top 動態決定。

<code class="javascript">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>

登入後複製

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

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

以上是如何使用 CSS、HTML 和 jQuery 建立黏性標題？的詳細內容。更多資訊請關注PHP中文網其他相關文章！