如何使用 CSS 和 JavaScript 在滾動上建立固定標題？

使用CSS 和JavaScript 在捲動上建立固定標題

在這種情況下，我們的目標是建立一個固定的標題並保留在滾動超過某個點時放置。

CSS 和 HTML方法

僅使用 CSS 和 HTML 不足以實現此功能。僅 CSS 無法提供將元素附加到特定滾動位置的解決方案。

JavaScript 整合

要修復滾動上的標題，需要 JavaScript 來進行事件處理。以下步驟概述了解決方案：

1. 定義固定位置類別：

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

2. 分配班級🎜>於滾動：

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

   這裡，當滾動位置超過100 像素時，'fixed' 類別會添加到'.sticky' 元素中，將其固定到位。

範例：

以下HTML 程式碼定義了固定標頭：

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

演示🎜>

[Fiddle 示範](https://jsfiddle.net/gxRC9/501/)

擴充範例：

如果觸發點應該在粘性元素到達屏幕頂部時發生，我們可以使用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>

擴展演示:

[擴展小提琴演示](https ://jsfiddle.net/gxRC9/502/)

以上是如何使用 CSS 和 JavaScript 在滾動上建立固定標題？的詳細內容。更多資訊請關注PHP中文網其他相關文章！