结合两个window.onscroll函数

用户名

我有两个window.onscroll功能，每个功能都可以，但是当它们都添加时，只有第一个列出的功能可以使用。如何结合这两个功能？一个函数滚动了我表的标题，而另一个实现了Return to Top函数。

<script>
const myEventHandlers = {
toggleSticky: function() {
let header = document.getElementById("ipfixedheader");
let sticky = header.offsetTop;

if (window.pageYOffset > sticky) {
  header.classList.add("sticky");
} else {
  header.classList.remove("sticky");
}
},
toggleButton: function() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
  document.getElementById("myBtn").style.display = "block";
} else {
  document.getElementById("myBtn").style.display = "none";
}
},
scrollToTop: function() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
}

window.addEventListener("scroll", function(e) {
myEventHandlers.toggleSticky();
});
</script>

粘滞功能有效，滚动到顶部按钮有效，但是单击时不起作用。

亚当·H

注释太长，因此这里是将2个事件附加到文档的滚动事件的示例。基本上，只需调用window.addEventListener("scroll" ...两次即可添加您的处理程序。

window.addEventListener("scroll", function(e){
	console.log('First Event Handler');
});

window.addEventListener("scroll", function(e){
	console.log('Second Event Handler');
});

div{
  height: 5em;
}

<div>
  asdasd
</div>
<div>
asdasd
</div>
<div>
  asdasd
</div>
<div>
asdasd
</div>
<div>
  asdasd
</div>
<div>
asdasd
</div>
<div>
  asdasd
</div>
<div>
asdasd
</div>
<div>
  asdasd
</div>
<div>
asdasd
</div>
<div>
  asdasd
</div>
<div>
asdasd
</div>
<div>
  asdasd
</div>
<div>
asdasd
</div>
<div>
  asdasd
</div>
<div>
asdasd
</div>
<div>
  asdasd
</div>
<div>
asdasd
</div>
<div>
  asdasd
</div>
<div>
asdasd
</div>
<div>
  asdasd
</div>
<div>
asdasd
</div>

编辑这是一个基于您问题中更新代码的示例。我在代码中添加了注释，以为您解释。

// Let's declare all the functions you want to execute in your event listners so they are all in 1 place
const myEventHandlers = {
  toggleSticky: function() {
    // find the header and get the offset
    let header = document.getElementById("ipfixedheader");
    let sticky = header.offsetTop;

    if (window.pageYOffset > sticky) {
      header.classList.add("sticky");
    } else {
      header.classList.remove("sticky");
    }
  },
  toggleButton: function() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
      document.getElementById("myBtn").style.display = "block";
    } else {
      document.getElementById("myBtn").style.display = "none";
    }
  },
  scrollToTop: function() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
  }
}

// Now let's add a new event listner for each of the function you want to call
window.addEventListener("scroll", function(e) {
  myEventHandlers.toggleSticky();
});

window.addEventListener("scroll", function(e) {
  myEventHandlers.toggleButton();
});


// As you can quickly see you don't actually need 2 event handlers because you could simply add your call to myEventHandlers.toggleButton inside the first event listener.
// Also you never actually called your scrollToTop function, so you need to add that call where it makes sense.

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。