添加JS时Tumblr的奇怪行为

Strange behavior of Tumblr when adding JS

本文关键字：JS Tumblr 添加      更新时间：2023-09-26

首先，我对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上，一切都按预期工作，并且标题已修复。

你可以在这里看到我的博客，上面有不起作用的代码（NSFW）

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

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

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

相关文章：