javascript - クラスが onScroll で繰り返しトリガーされる

Question

ページを下にスクロールするとヘッダーにクラスが追加され、一番上に来たら元の状態に戻る onscroll 機能があります。これで、関数は完全に機能しますが、DOM に対して繰り返しクエリを実行しています。したがって、下にスクロールすると、「setOpaqueState」のクラスが次のように繰り返し挿入されます。

<div id="header1" class="setOpaqueState setOpaqueState setOpaqueState setOpaqueState"/>

一番上に向かってスクロールしている間でも、一番上に到達するまで追加し続け、そのときに「removeOpaqueState」が追加されます。

window.scroll=null; を使用してみました。私の関数の最後に、それは私のヘッダーを「setOpaqueState」のクラスで保持するだけです。

ここに私の JS があります: window.onscroll = scroll;

function scroll() {
    var header=document.getElementById("header1");

    if((document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset) > 50){
        header.className = header.className.replace ( /(?:^|\s)removeOpaqueState(?!\S)/g , '' );
        header.className += " setOpaqueState";
    }
    else {
        header.className = header.className.replace ( /(?:^|\s)setOpaqueState(?!\S)/g , '' ); /* REGEX-verify the above is the whole classname/ensures there is no non-space character following*/
        header.className += " removeOpaqueState";
    }
}