如何為網站建立黏性標題欄

Question

我想為網站建立一個黏性標題欄，就像本網站(http://www.fizzysoftware.com/) 上的黏性標題一樣，如果有任何可以幫助我進行編碼或任何可以幫助我的資源創建相同的。您的回覆將對我有很大幫助。

Answer 1

如果你想讓它在向下滾動到某個點時保持黏性，那麼你可以使用這個函數：

$window = $(window);
$window.scroll(function() {
  $scroll_position = $window.scrollTop();
    if ($scroll_position > 300) { // if body is scrolled down by 300 pixels
        $('.your-header').addClass('sticky');

        // to get rid of jerk
        header_height = $('.your-header').innerHeight();
        $('body').css('padding-top' , header_height);
    } else {
        $('body').css('padding-top' , '0');
        $('.your-header').removeClass('sticky');
    }
 });

和黏性類別：

.sticky {
  position: fixed;
  z-index: 9999;
  width: 100%;
}

您可以使用這個插件，它有一些有用的選項

jQuery 黏性標題

Answer 2

在 CSS 中加入

position: fixed;

到你的標題元素。真的就是這麼簡單。 下次，嘗試右鍵單擊您在網站上看到的內容並選擇“檢查元素”。我認為現在每個現代瀏覽器都有它。非常有用的功能。