【jQuery】スティッキーヘッダーの作り方

ページの下方向にスクロールしていくと画面上部に固定化されるヘッダー(もしくはナビ等)のこと。

固定化したい要素に”position:sticky;”を設定すればそれで実現できるみたいだが、自作してみた。

ソースコード

HTML

ダミーテキストは以下から取得。

すぐ使えるダミーテキスト – 日本語 Lorem ipsum

https://lipsum.sugutsukaeru.jp/

CSS


header {
    width: 100%;
    background-color: #eee;
}

header .inner {
    height: 300px;
}

header.sticky {
    /* navをfixedにするとnavの高さが消えてレイアウトが乱れるので
       paddingでnavと同じ高さを確保する */
    padding-bottom: 50px; /* navの高さと同じ */
}

nav {
    width: 100%;
}

nav.sticky {
    position: fixed;
    top: 0;
}

.menu-list {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;

    width: 100%;
    background-color: #aaa;
}

.menu-list-item {
    width: 100px;
    height: 50px;
    line-height: 50px;
}

.content {
    width: 100%;
    height: 3000px;
    background-color: #ccc;
}

jQuery


$(function(){
    var $window = $(window);
    var $header = $('header');
    var $nav    = $header.find('nav');
    var headerHeight = $header.height(); // headerの高さ
    var navHeight    = $nav.height();    // navの高さ

    $window.scroll(function() {
        // 現在の位置
        var currentPos = $window.scrollTop();

        // 現在の位置がnavまで到達したらnavを固定
        if(currentPos >= headerHeight - navHeight) {
            $header.addClass('sticky');
            $nav.addClass('sticky');
        } else {
            $header.removeClass('sticky');
            $nav.removeClass('sticky');
        }
    });
});

ソースコード

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル