Question

首先，我是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似乎就是问题所在。每当我将页面滚动超过100px时，它会重新加载而不是将标题固定到顶部。在CodePen上，一切都按预期工作，标题得到修复。

您可以使用上面here（NSFW）中未使用的代码查看我的博客

每一个帮助或暗示都会受到赞赏，我不知道我做错了什么。

Answer 1

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

将</header>移到<main class="content">前面。

添加JS时Tumblr的奇怪行为

1 个答案: