Javascript垂直滾動功能

我正在嘗試使用JavaScript在我的頁面上檢測滾動條。這樣，當用戶滾動一定數量的頁面時，我可以更改某些元素的類和屬性。這是我的JS功能：Javascript垂直滾動功能

function detectScroll() { 
    var header = document.querySelector(".headerOrig"), 
     header_height = getComputedStyle(header).height.split('px')[0], 
     fix_class = "changeColor"; 

    if(window.pageYOffset > header_height) {  
     header.classList.add(fix_class); 
    } 
    if(window.pageYOffset < header_height) { 
     header.classList.remove(fix_class); 
    } 
    var change = window.setInterval(detectScroll, 5000); 
}

，當加載頁面時，我稱之爲：

<body onload="detectScroll();">

不過，我有這個問題 - 我需要建立一個非常小的區間，以使函數被調用並且類會立即更改。但是，然後頁面凍結，除JS功能以外的所有內容都運行得非常緩慢。有什麼更好的方式在JavaScript中實現這一點？

感謝您的任何意見/建議。

來源

2015-04-20 puk789

我認爲JavaScript中有一個onscroll事件處理程序。你有沒有試過？ –

有'document.addEventListener（「scroll」，function（）{console.log（document.body.scrollTop）}）''。它比您的解決方案更容易，響應更快。 – veproza

你將要改變一些事情。首先，我們可以使用onscroll而不是間隔。但是，您也希望儘可能緩存以減少滾動上的計算量。更進一步，您應該使用requestAnimationFrame（或者對於舊版瀏覽器，一般只是「反彈」 - 請參閱鏈接）。這可確保您的工作僅在瀏覽器計劃重新繪製時纔會發生。例如，當用戶滾動實際的滾動事件時可能觸發幾十次，但該頁面只重繪一次。你只關心那個單一的重繪，如果我們可以避免爲其他X次工作，它會更加平滑：

// Get our header and its height and store them once 
// (This assumes height is not changing with the class change). 
var header = document.querySelector(".headerOrig"); 
var header_height = getComputedStyle(header).height.split('px')[0]; 
var fix_class = "changeColor"; 

// This is a simple boolean we will use to determine if we are 
// waiting to check or not (in between animation frames). 
var waitingtoCheck = false; 

function checkHeaderHeight() { 
    if (window.pageYOffset > header_height) {  
    header.classList.add(fix_class); 
    } 
    if (window.pageYOffset < header_height) { 
    header.classList.remove(fix_class); 
    } 
    // Set waitingtoCheck to false so we will request again 
    // on the next scroll event. 
    waitingtoCheck = false; 
} 

function onWindowScroll() { 
    // If we aren't currently waiting to check on the next 
    // animation frame, then let's request it. 
    if (waitingtoCheck === false) { 
    waitingtoCheck = true; 
    window.requestAnimationFrame(checkHeaderHeight); 
    } 
} 

// Add the window scroll listener 
window.addEventListener("scroll", onWindowScroll);

來源

2015-04-20 14:37:17 rgthree

很好的答案！我沒有深入思考過這個問題。謝謝！ – puk789

使用onscroll而不是onload因此您不需要間隔調用該函數。你dedectScroll功能時，如果使用onscroll

<body onscroll="detectScroll();">

來源

2015-04-20 14:34:47 semirturgay

你的函數被遞歸添加間隔任何滾動appers被自動觸發，您應該添加一個事件監聽器滾動事件是這樣的：

function detectScroll() { 
    var header = document.querySelector(".headerOrig"), 
     header_height = getComputedStyle(header).height.split('px')[0], 
     fix_class = "changeColor"; 

    if(window.pageYOffset > header_height) {  
     header.classList.add(fix_class); 
    } 
    if(window.pageYOffset < header_height) { 
     header.classList.remove(fix_class); 
    } 

} 
window.addEventListener("scroll",detectScroll);

來源

2015-04-20 14:35:05 n00dl3

Javascript垂直滾動功能

回答

相關問題