Question

所以我遇到了这个非常奇怪的javascript问题。一切都工作正常，我的滚动事件监听器将正确触发。现在，在改变一些东西后，它似乎失败了。

具体来说，每当我尝试滚动时，我立即再次回到顶部。控制台中没有错误，因此我认为它不是任何类型的语法错误。这是我的JS片段：

var header = document.querySelector('.Header');
var content = document.querySelector('.Hero__content');

window.addEventListener('scroll', function() {
  console.log("Added listener.");
  if (document.body.scrollTop > 300 && !header.classList.contains('Header--fixed')) {
    console.log("Scrolled below 300.");
    header.classList.add('Header--fixed');
    header.classList.remove('Header--inHero');
  } else if (document.body.scrollTop = 0 && header.classList.contains('Header--fixed')) {
    console.log("Scrolled to top.");
    header.classList.remove('Header--fixed');
    header.classList.add('Header--inHero');
  }
});

我添加了一些console.log（）语句来查看发生了什么。结果是在加载时没有记录任何内容。当我尝试滚动它时不断记录“添加了监听器”，所以第一个console.log（）就在那里。它每个滚动记录很多次（虽然应该注意我用触控板滚动，所以这可能与它触发的次数有关。）

顺便说一下，保留了一般类修改行为。当我滚动得足够高并且低于我的300px标记（document.body.scrollTop＆gt; 300）时，将添加该类，并删除另一个类。然而，如果没有触发else方法，则再次位于顶部。

脚本位于关闭正文标记之前的HTML文件的末尾。接下来是另外两个脚本，我将按顺序提供给您：

main.js包含Google Web Starter工具包默认的JS文件，这是一个自我调用功能，可以执行一些离线缓存工作。此文件未被修改。它可以作为一个整体on GitHub使用，这样我就不必复制整件事了。

另一个是谷歌分析片段，它是直接从谷歌复制的。

订单是：

正文标记的最终元素
我的代码段内联使用脚本代码
main.js
Google Analytics代码段

预期的行为是没有滚动干扰和正确的类修改，实际行为是奇怪的滚动重置每次尝试滚动。

非常感谢任何帮助。谢谢！

Answer 1

我似乎删除了＆lt;符号，使得＆lt; = 0 into = 0.这个条件在开始时总是为真，所以它总是会重新将类重新设置回来。

每当我尝试向下滚动时，滚动事件监听器都会重置滚动到顶部

1 个答案: