使EventListener仅触发一次，而不将其删除-没有jQuery

Question

好的，所以我有以下代码行...

window.addEventListener("scroll", sHeader);

function sHeader(){
var yPosition = window.pageYOffset;

 if ( yPosition = > 5 ){
 header.className += ' shorter';
 }
}

...这使我可以在滚动后更改标题的样式。 但是，当我进一步向下滚动页面时，它继续不必要地启动，因此在HTML的“标题”的类属性中添加了更多的“更短” 。 像这样：

<header class=" shorter shorter shorter shorter shorter shorter shorter...">

我了解使用以下代码可以消除这种情况...

window.addEventListener("scroll", sHeader);

function sHeader(){
var yPosition = window.pageYOffset;

 if ( yPosition = > 5 ){
 header.style.height = "60px";
 }
}

...但是，我只是不喜欢执行后的HTML外观，就像这样：

<header style="height: 60px;">

有没有办法，不用jQuery，我只能使提供的eventListener触发一次而不必删除它，因为如果yPosition小于5px（标题恢复为原始样式），然后用户决定，则再次需要在同一会话中再次向下滚动页面。

先感谢您！

Answer 1

在描述情况时，您无需触发该事件。 解决问题的方法很少。

方式1

使用.classList.add而不是.className +=来避免class="shorter shorter shorter shorter shorter shorter shorter..." .className += class="shorter shorter shorter shorter shorter shorter shorter..." 。

window.addEventListener("scroll", sHeader);

function sHeader() {
    var yPosition = window.pageYOffset;
    if (yPosition >= 5){
        header.classList.add('shorter');
    } else {
        header.classList.remove('shorter');
    }
}

classList属性适用于classList ，但是您可以使用polyfill 。

方式二

添加一个变量，该变量会记住标头是否已缩短，并在事件侦听器中对其进行检查。

window.addEventListener("scroll", sHeader);

var isHeaderShorter = false;
function sHeader() {
    var yPosition = window.pageYOffset;
    var shouldBeShorter = yPosition >= 5;

    // Checking whether the header should be changed
    if (shouldBeShorter === isHeaderShorter) {
        return;
    }

    if (shouldBeShorter) {
        header.className += ' shorter'
    } else {
        header.className = header.className.split(' shorter').join('');
    }
    isHeaderShorter = shouldBeShorter;
}

Answer 2

{once：true}仅触发一次事件

window.addEventListener("scroll", sHeader, {once: true});