【JavaScript】特定のスクロール量を基準にする

開始タグ

「スクロールしたらヘッダーをあれこれしたい」的なことは日々増えている気がするのでメモ。

方法

例えば、
・スクロールしたらヘッダーの背景を白色にしたい
・ヘッダーの文字サイズを大きくしたい

みたいなCSSで解決できそうなものであれば
・特定のスクロール量を基準にクラス名をつけ外しさせる
方法で対処できます。

common.js

$(window).on("load resize scroll", function() {
    var body = $("body");
    var browseWid = $(window).width(); //ブラウザの横幅取得
    var widPc = browseWid > breakpoint; //PC表示のとき
    var widSp = browseWid <= breakpoint; //SP表示のとき

    var amount = 250; //スクロール量（px）
    var scrollPoint = $(this).scrollTop(); //スクロールした量
    var scrollStartPc = "js-scroll_start_pc"; //PC用
    var scrollStartSp = "js-scroll_start_sp"; //スマホ用

    if (widPc) {
        body.removeClass(scrollStartSp);
        if (scrollPoint > amount) {
            body.addClass(scrollStartPc);
        } else if (scrollPoint == 0) {
            body.removeClass(scrollStartPc);
        }
    } else if (widSp) {
        body.removeClass(scrollStartPc);
        if (scrollPoint > amount) {
            body.addClass(scrollStartSp);
        } else if (scrollPoint == 0) {
            body.removeClass(scrollStartSp);
        }
    }
});

あとは、PCの場合なら「.js-scroll_start_pc」を頭に書いて、各CSSを書いてあげればOK。

閉じタグ

もっといい方法はある気がするけど、現状はこの状態。
今後改善方法を発見し次第取り入れていきます。