Question

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

window.addEventListener("scroll", sHeader);

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

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

...这使我能够在滚动后更改标题的样式。但是，当我向下滚动页面时，它会不必要地继续引发，从而在HTML中为“header”的类属性添加更多“更短”;像这样：

<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（标题恢复为原始样式）并且a然后，用户决定在同一会话中再次向下滚动页面。

提前谢谢！

Answer 1

在描述情况时，您不需要触发一次事件。解决问题的方法很少。

方式1

使用.classList.add代替.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属性在IE≥10时有效，但您可以使用a polyfill。

方式2

添加一个变量，记住标头是否缩短，并在事件监听器中检查它。

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

使EventListener只触发一次，而不删除它 - 没有jQuery

2 个答案:

方式1

方式2