【JQuery】スクロールしてヘッダーを途中から固定させるJavaScript

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

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

参考サイト

takaya-com.jp

 

1 User

2 Pockets

【jQuery】スクロールしたら途中からヘッダーを固定する – JavaScript Archives（...

https://takaya-com.jp/archives/2020/04/【jquery】スクロールしたら途中からヘッダーを固定/