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

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

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

ソースコード

HTML


<header>
    <div class="inner">
        
    </div>
    <nav>
        <ul class="menu-list">
            <li class="menu-list-item">項目1</li>
            <li class="menu-list-item">項目2</li>
            <li class="menu-list-item">項目3</li>
            <li class="menu-list-item">項目4</li>
            <li class="menu-list-item">項目5</li>
        </ul>
    </nav>
</header>

<div class="content">
    <p>ダミーテキスト</p>
</div>

</div>

<nav>

</ul>

</nav>

</header>

<p>ダミーテキスト</p>

</div>

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

すぐ使えるダミーテキスト – 日本語 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;
}

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');
        }
    });
});

$(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');

}

});

ソースコード

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

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