web-dev-qa-db-ja.com

Webサイトのスティッキーヘッダーバーを作成する方法

このウェブサイト（http://www.fizzysoftware.com/）のスティッキーヘッダーと同じように、ウェブサイトのスティッキーヘッダーバーを作成したいと思います。コーディングやリソースの作成に役立つ情報があれば、同じ。あなたの返事は私にとって大きな助けになるでしょう。

headersticky
5
Arsh Kapoor

CSSに追加します

position: fixed;

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

13
MichalHlavacek

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

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

8
Danish Iqbal