header - Web サイトの固定ヘッダー バーを作成する方法

Question

この Web サイト (http://www.fizzysoftware.com/) のスティッキー ヘッダーと同じように、Web サイト用のスティッキー ヘッダー バーを作成したいと考えています。同じ。あなたの返事は私にとって大きな助けになるでしょう。

Answer 1

CSS に追加します。

position: fixed;

ヘッダー要素に。本当に簡単です。そして次回は、ウェブサイトで見たものを右クリックして、「要素の検査」を選択してみてください。現在、すべての最新のブラウザーにそれが備わっていると思います。非常に便利な機能。

Answer 2

特定のポイントまでスクロールしたときに粘着性を持たせたい場合は、次の関数を使用できます。

$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 スティッキー ヘッダー