Javascript 类在Croll上被反复触发

我有一个onscroll函数，当你向下滚动页面时，一个类会被添加到我的标题中，当你在页面顶部时，会返回到它的原始状态。现在，该函数可以完美地工作，但它会重复查询DOM。因此，如果向下滚动，“setOpaqueState”类会重复注入，如下所示：

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

---

为什么要使用类

removeOpaqueState

？您不能在默认情况下将这些样式放在

#header1

上吗

if（offset>50）{header.className=“setOpaqueState”}else{header.className=“”；}

removeOpaqueState的透明度为50%。加载页面时，页眉是透明的，向下滚动时，页眉将变为不透明，到达页眉顶部后，页眉将变回透明。只适用于一个页面，其他页面的默认设置为不透明OK，那个么这会满足您的需要吗<代码>var default=“myClass”；如果（偏移量>50）{header.className=default+“setOpaqueState”}或者{header.className=default+“removeOpaqueState”}实现了这个不会触发onScroll函数的函数…在我使用classList.add/”.remove之前，它工作得很好，但不幸的是IE10&down不支持它，所以不得不使用className。

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