首先,我对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">
前面。