0

首先，我对 JavaScript 有点陌生。但是我写了一个小脚本来检查 DOM 是否准备好，然后在页面滚动时修复我的 tumblr 博客的标题。

我的代码如下所示：

document.addEventListener("DOMContentLoaded", function() {
console.log("DOM ready!");

function fixHeader() {
  var header = document.querySelector("#js--site-header");
  var offset = 100;
  // only used to see the current offset when debugging
  console.log(window.scrollY);

  window.scrollY >= offset 
      ? header.classList.add("js--header-fixed") 
      : header.classList.remove("js--header-fixed");
 };

document.addEventListener("scroll", fixHeader);
});

我在CodePen上模拟了完全相同的代码以测试它是我的代码中的错误还是 Tumblr 的问题。现在看来，Tumblr 是个问题。每当我将页面滚动超过 100 像素时，它都会重新加载，而不是将标题固定到顶部。在 CodePen 上，一切都按预期工作，并且标题得到修复。

您可以在此处查看我的博客以及上面的无效代码(NSFW)

每一个帮助或提示将不胜感激，我不知道我做错了什么。

4

1 回答 1

1

您遇到的不是重新加载（您可以使用 Firebug 之类的工具来查看您的浏览器是否创建了任何 HTTP 请求）。您的 tumblr 博客中的问题是您尝试修复的“标题”也包含整个内容。因此，一旦达到 100px 的偏移量，整个内容就被固定了，没有留下任何可滚动的内容。滚动偏移量回落到 0，您的事件处理程序被第二次触发，事件处理程序再次取消修复“标题”。

移动你</header>的前面<main class="content">。

于 2013-10-26T12:15:37.507 回答