ミギムキ

[jQuery] ページスクロールしたらナビゲーションメニューを固定表示しつつ小さくしたい

公開日:2018/09/28 更新日:2019/07/31

ページをスクロールしたときに、ナビゲーションメニューを小さく縮小しつつ、ページ上部に固定しているサイトがあります
各ページへの動線を残しつつ、少しでもコンテンツの表示領域を確保するという、ささやかながら大事な配慮です
このような動きを、メニューが見切れる量のページスクロールがされたときにクラスを付与するという方法で実現するコードを紹介します

サンプルコード

jQuery

jQuery(function($) {
    $(window).scroll(function() {
        var headerHeight = $('.g_navi').innerHeight();
        var scrollPos = $(this).scrollTop();
        if( scrollPos > headerHeight ) {
            $('.g_navi').addClass('js_active');
        }
        else {
            $('.g_navi').removeClass('js_active');
        }
    });
});

CSS

.g_navi.js_active {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 9999;
    height: 100px;
}

仕組み、解説、補足など

グロナビが見切れると、.js_activeというクラスが付与されます
グロナビに.js_activeが付与されているときに、「position:fixed」と指定することでグロナビの位置を固定しています
合わせてheightの値も変更したり、中の要素を非表示にすることで、グロナビのサイズを調整することができます

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。