我有两个 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>
粘滞功能有效,滚动到顶部按钮有效,但点击后不会转到顶部。
最佳答案
这对于评论来说太长了,所以这里是一个将 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.
关于javascript - 组合两个 window.onscroll 函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52390630/