【问题标题】:sticky navigation and scroll to top functions work individually, but don't work together粘性导航和滚动到顶部功能单独工作,但不能一起工作
【发布时间】:2021-06-12 20:44:48
【问题描述】:

我的网站上只有两个脚本,一个它们可以工作,它们不能一起工作......我在这里错过了什么?

第一个脚本:

window.onscroll = function() {myFunction()};

var navigation = document.getElementById("navigation");
var sticky = navigation.offsetTop;

function myFunction() {
  if (window.pageYOffset > sticky) {
    navigation.classList.add("sticky");
  } else {
    navigation.classList.remove("sticky");
  }
}

第二个脚本:

mybutton = document.getElementById("tothetop");

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

function scrollFunction() {
  if (document.body.scrollTop > 98 || document.documentElement.scrollTop > 98) {
    mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }
}

function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}

我不明白他们为什么不一起工作。

【问题讨论】:

  • 两个函数不能一起工作是什么意思?是您的第一个函数没有调用该函数还是两者都不起作用。

标签: javascript css scrolltop


【解决方案1】:

您通过执行双重声明来覆盖 onscroll 函数

window.onscroll = function() {myFunction()}; // oh no, I'll be replaced

window.onscroll = function() {scrollFunction()}; // I'll be called only

尝试:

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

【讨论】:

  • 完美,工作!哦,我现在明白了 - 我不知道这个“window.onscroll”不能使用 2 次 :) 谢谢!
猜你喜欢
  • 2023-03-31
  • 2016-05-18
  • 1970-01-01
  • 1970-01-01
  • 2021-08-05
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-12-20
相关资源
最近更新 更多