[jQuery]スクロールしてヘッダーを途中から固定させるJavaScript

[jQuery]スクロールしてヘッダーを途中から固定させるJavaScript

2020年12月7日
HTML・CSS
スポンサーリンク

よく使うけど、度々調べてるので、メモ。

JavaScript

var nav_pos = $("header").offset().top;
var nav_height = $("header").outerHeight();
$(window).scroll(function () {
    if ($(this).scrollTop() > nav_pos) {
        $("header").addClass("fixed");
    } else {
        $("header").removeClass("fixed");
    }
});

CSS

header.fixed {
    left: 0;
    position: fixed;
    top: 0;
}

ヌルっと出すなら

header{transition: all 0.3s ease 0s;}

参考サイト