好的,所以我有以下代码行...
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(标题恢复为原始样式),然后用户决定,则再次需要在同一会话中再次向下滚动页面。
先感谢您!
最佳答案
在描述情况时,您无需触发该事件。解决问题的方法很少。
方式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;
}
关于javascript - 使EventListener仅触发一次,而不将其删除-没有jQuery,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/49473072/