添加JS

時，Tumblr的奇怪行爲首先我對JavaScript有點新鮮。不過，我寫了一個小腳本來檢查DOM是否準備就緒，然後在頁面滾動時修復我的tumblr博客的標題。添加JS

我的代碼如下所示：

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）在不工作的代碼

每一個幫助或提示，將不勝感激，我不知道我在做什麼錯。

來源

2013-10-26 Kevin Gimbel

可能會發生JS異常，但因爲頁面正在重新加載，所以您正在丟失它。取決於你使用的是哪個控制檯（Frirebug？），會有一個「Persist」類型的按鈕，這會在頁面重新加載後在控制檯中留下JS消息/異常 - 看看你是否有任何東西併發布它？ –

我正在使用Chrome內置控制檯。只要頁面沒有被手動重載（F5），它就會保持DOM內發生的所有事情。每當我向下滾動頁面「閃爍」並且跳回到頂部（立即）。這是幾次滾動後的屏幕截圖。（使用鼠標滾輪時用console.log（window.offsetY）53和106記錄，當快速拖動滾動條時用其他數字記錄）。 [截圖（imgur）]（http://imgur.com/WGom11t） –

什麼，你遇到的是不是重裝（你可以使用類似Firebug工具來查看您的瀏覽器是否產生任何HTTP請求）。你的tumblr博客中的問題是你正在嘗試修復的「標題」也包含整個內容。因此，一旦達到100px的偏移量，整個內容就是固定的，並且不剩下可滾動的內容。滾動偏移量回落到0，您的事件處理程序再次觸發，事件處理程序再次解除「標題」。

在<main class="content">前將您的</header>。

來源

2013-10-26 12:15:37 hairyheron

FML。我沒有看到標題的尷尬沒有被關閉。謝謝，你爲我節省了很多時間。我不知道多久才能看到這一點。 –

回答

相關問題