javascript - 滚动上有多个功能？

使用我当前的代码，我只能拥有一个或另一个，这既可以是我的粘性导航，也可以是距文档顶部100px处的“返回顶部”按钮。有什么办法可以同时使用两者吗？

这是我当前的代码

window.onscroll = function() {navFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function navFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }

和

window.onscroll = function() {scrollFunction()};
function scrollFunction() {
    if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
        document.getElementById("myBtn").style.display = "block";
    } else {
        document.getElementById("myBtn").style.display = "none";
    }
}
function topFunction() {
    document.body.scrollTop = 0; // For Safari
    document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}

抱歉，如果这是一个愚蠢的问题。我还是这个新手:)

提前致谢！

最佳答案

您可以在window.onscroll匿名函数中调用这两个函数：

window.onscroll = function() {
    navFunction();
    scrollFunction();
};

另外，您可以使用标准的addEventListener方法来注册这两个功能：

window.addEventListener("scroll", navFunction);
window.addEventListener("scroll", scrollFunction);

注意，通过这种方式，我们不会在两个函数中使用括号，因为我们没有执行它们。我们只是告诉事件监听器事件发生时它将执行的函数的名称。