javascript - 组合两个 window.onscroll 函数

Question

我有两个 window.onscroll 函数，每个函数都有效，但是当它们都被添加时，只有第一个列出的函数有效。如何结合这两个功能？一个函数滚动表格的标题，而另一个函数实现返回顶部函数。

<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>

粘滞功能有效，滚动到顶部按钮有效，但点击后不会转到顶部。

Answer 1

这对于评论来说太长了，所以这里是一个将 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.