【jQuery】スクロールすると上から出てくるヘッダー

ホームページ制作する場合によく使います。

下層ページでは固定ヘッダーにしておいて、
トップページではスクロール後に上から表示させたい場合など。

デモから。

See the Pen
VwjmzWo by momoi (@momoi)
on CodePen.

重要部分のみ抜粋。

header {
    position: fixed;
    z-index: 10000;
    width: 100%;
    top: 0;
    display: none;
}

ヘッダーを上部に固定し、初期表示では非表示に。

var headNav = $("header");
/* 初期表示、スクロール時にイベント開始 */
$(window).on("load scroll", function () {
    /* スクロール位置の高さが200pxより大きい、かつis-fixedクラスがない場合 */
    if ($(this).scrollTop() > 200 && headNav.hasClass("is-fixed") == false) {
        headNav.css("display", "block");
        headNav.css({ "top": "-72px" }); /* ヘッダーの高さ分マイナスにする */
        headNav.addClass("is-fixed");
        headNav.animate({ "top": 0 }, 600);
    }
    /* スクロール位置の高さが200pxより小さい、かつis-fixedクラスがある場合 */
    else if ($(this).scrollTop() < 200 && headNav.hasClass("is-fixed") == true) {
        headNav.removeClass("is-fixed");
        headNav.css("display", "none");
    }
});

固定ヘッダーが表示された場合は、is-fixedクラスを追加し、
その後ヘッダを表示させるかどうかを判定するために使用する。

注意
Wordpressの場合は$をjQueryにすること。