PCディスプレイではユーザビリティの高いfixedナビゲーション。しかし情報を詰め込みすぎると可視領域を圧迫してしまいユーザビリティが低下する恐れがある。そういう時はスクロール時にヘッダーをコンパクトにしてしまおう。

fixedナビゲーションにできるだけ情報を詰め込みたい、だけど可視領域はできるだけ広げたい、というときは、一定以上のスクロールでナビゲーションをコンパクトにしてしまいましょう。

動作イメージ

ヘッダーナビゲーションは2段構成とする。
メインナビゲーションの上に、重要度が劣る小さいナビゲーションがあるイメージです。

一定以上スクロールすると、小さい方のナビゲーションが非表示になり、ナビゲーション全体もコンパクトになるアニメーションを行う。

HTMLとCSS

<style>
    .header-navigation {
        position: fixed;
        top: 0;
        z-index: 999;
        transition-duration: 0.5s;
        width: 100%;
        padding: 30px 10px;
        }

        .header-navigation.minimum {
            padding: 10px;
        }

        .header-navigation .navigation-global {

        }
        .header-navigation .navigation-global ul li {
            display: inline-block;
        }

        .header-navigation .navigation-sub {
            max-height: 999px;
            transition-duration: 0.25s;
            overflow: hidden;
            }

            .header-navigation .navigation-sub.minimum {
                max-height: 0;
            }

            .header-navigation .navigation-sub ul li {
                display: inline-block;
    }
</style>
<body>
<div class="header-navigation">
    <div class="navigation-sub">
        <ul>
            <li><a href="Lorem">Lorem</a></li>
            <li><a href="ipsum">ipsum</a></li>
            <li><a href="dolor">dolor</a></li>
        </ul>
    </div>
    <div class="navigation-global">
        <ul>
            <li><a href="sit">sit</a></li>
            <li><a href="amet">amet</a></li>
            <li><a href="consectetur">consectetur</a></li>
            <li><a href="adipisicing">adipisicing</a></li>
            <li><a href="elit">elit</a></li>
        </ul>
    </div>
</div>
</body>

javascript(jQuery)

<script>
$(function(){
    //何pxスクロールしたときに実行しますか？
    var scrollNum = 100;
    // コンパクトにする対象のセレクタは？
    var minimumTarget = '.header-navigation';
    minimumTarget += ', .header-navigation .navigation-sub';

    $(window).scroll(function() {
        if ($(this).scrollTop() > scrollNum) {
            //minimumにするときの処理
            $(minimumTarget).addClass('minimum');
        } else {
            //minimumをやめるときの処理
            $(minimumTarget).removeClass('minimum');
        }
    });
});
</script>

実際にテストしてないですが書いたので一応残しておきます。

yoshi44ever

一定以上スクロールしたらヘッダーナビゲーションをコンパクトにする

動作イメージ

HTMLとCSS

javascript(jQuery)