特定スクロール位置でクラスを変更する

Question

特定スクロール位置を分岐点に特定要素のクラスを差し替えたいと考えております。

具体的には下記内容となります。

150pxスクロールを分岐点に<header>タグのクラスを差し替えたいです。

■< 150pxの時

<header class="bigger">

■> 150pxの時

<header class="smaller">

下記の通り、クラスの追加・削除はできたのですが、
クラスの差し替えについてどう変更すればいいかわからない状態です。

    function init() {
        window.addEventListener('scroll', function(e){
            var distanceY = window.pageYOffset || document.documentElement.scrollTop,
                shrinkOn = 150,
                header = document.querySelector("header");
            if (distanceY > shrinkOn) {
                classie.add(header,"smaller");
            } else {
                if (classie.has(header,"smaller")) {
                    classie.remove(header,"smaller");
                }
            }
        });
    }
    window.onload = init();

何卒ご教授の程よろしくお願い致します。

Answer 1

classie.js をお使いなのですね。
それはともかく、add, remove ができているのですから、
切り替えたいなら 削除後 addすればいいだけではないのですか？

if (distanceY > shrinkOn) {
    if (classie.has(header,"bigger")) {
        classie.remove(header,"bigger");
    }
    classie.add(header,"smaller");
} else {
    if (classie.has(header,"smaller")) {
        classie.remove(header,"smaller");
    }
    classie.add(header,"bigger");
}

単純すぎるので、おそらく誤解しているんだと思うんですが。

Comments

[castail]

ご回答ありがとうございます。

当方js、jquery初心者でうまく理解できておりませんでした。
今回回答の速さの順でベストアンサーを決めさせていただきましたが、ご教授ありがとうございました。

Answer 2

タグにjQueryとあるので、jQueryで回答します。

$(function(){
    $(window).on("scroll", function(e){
        var distanceY = $(this).scrollTop();
        shrinkOn = 150;
        if(distanceY > shrinkOn){
            $("header").attr("class", "smaller");
        } else {
            $("header").attr("class", "bigger");
        }
    });
});

jQueryなら以上でできます。

Comments

[castail]

ご回答ありがとうございます。

ご教授頂いた内容でうまくいきました！
誠にありがとうございました。