React JS粘滯導航滾動

Question

我創建了一個React組件here，我試圖讓它在滾動過去之後變得固定。在這種情況下，一切都按預期工作，但在滾動瀏覽元素高度後，它會不斷地打開和關閉類。

這裏的滾動功能：

handleScroll: function(event) { 
    // Save the element we're wanting to scroll 
    var el = document.querySelector("#target"); 
    // If we've scrolled past the height of the element, add a class 
    if (el.getBoundingClientRect().bottom <= 0) { 
    console.log(el.getBoundingClientRect().bottom + " bottom"); 
    this.setState({ 
     headerIsActive: true 
    }); 
    // If we've scrolled back up to the top of the container, remove the class 
    } else if (el.getBoundingClientRect().top <= 0) { 
    console.log(el.getBoundingClientRect().top <= 0 + " top"); 
    this.setState({ 
     headerIsActive: false 
    }); 
    } 
}, 

有人能告訴我什麼，我做錯了什麼？或者將我指向正確的方向？

感謝

Answer 1

通過在window.scrollY位置爲0，像這樣檢測修正：

handleScroll: function(event) { 
    // Save the element we're wanting to scroll 
    var el = document.querySelector("#target"); 
    var pageY = window.scrollY 
    // If we've scrolled past the height of the element, add a class 
    if (el.getBoundingClientRect().bottom <= 0) { 
    console.log(el.getBoundingClientRect().bottom + " bottom"); 
    this.setState({ 
     headerIsActive: true 
    }); 
    // If we've scrolled back up to the top of the container, remove the class 
    } else if (pageY == 0) { 
    console.log("at top"); 
    this.setState({ 
     headerIsActive: false 
    }); 
    } 
}, 

Answer 2

你的要求幾乎有同樣的想法，因爲這反應庫，它是由我之前創建： https://github.com/thinhvo0108/react-sticky-dynamic-header

隨意玩它，雖然很簡單！

或者你可以簽出源代碼，看看我是如何處理的滾動位置和頭的高度（反應粘性動力頭/ src目錄/ index.js）

PS：我的圖書館甚至會超出你的預期（不僅僅是「在它自己滾動後自動修復」），你可以實際使用2個不同的組件（或DOM元素），而不管它的大小是否爲頭部的外觀（在粘性之前和之後當用戶向下滾動&）。另外，當標題交換時，也會顯示一些平滑的效果。