搜尋

首頁  >  問答  >  主體

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

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

P粉505450505P粉505450505291 天前741

全部回覆(2)我來回復

  • P粉604507867

    P粉6045078672024-03-26 14:34:26

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

    $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 黏性標題

    回覆
    0
  • P粉265724930

    P粉2657249302024-03-26 10:55:25

    在 CSS 中加入

    position: fixed;

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

    回覆
    0
  • 取消回覆