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