Reagiere JS Sticky Navigation onScroll

Question

Ich habe eine React-Komponente here erstellt, wo ich versuche, die Kopfzeile zu beheben, nachdem es über sich selbst gescrollt hat. In diesem Fall funktioniert alles wie erwartet, aber nachdem ich über die Elementhöhe gescrollt habe, schaltet es die Klasse ständig ein und aus.

Hier ist die Scroll-Funktion:

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 
    }); 
    } 
}, 

Kann jemand bitte sagen Sie mir, was ich falsch mache? Oder weisen Sie mich in die richtige Richtung?

Dank

Answer 1

durch Erfassen Fest wenn die window.scrollY Position bei 0 ist, etwa so:

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

Ihre Anfrage hat fast die gleiche Idee wie diese Bibliothek reagieren, die von mir erstellt wurde, bevor : https://github.com/thinhvo0108/react-sticky-dynamic-header

Fühlen Sie sich frei, damit zu spielen, ziemlich einfach!

Oder Sie können die Quelle Kasse, um zu sehen, wie ich mit der Scroll-Position behandelt und die Höhe des Kopfes (in reagieren klebrig-Dynamic-Header/src/index.js)

PS: meine Bibliothek Wird sogar mehr als erwartet (nicht nur "nach dem Scrollen über sich selbst behoben"), können Sie tatsächlich 2 verschiedene Komponenten (oder DOM-Elemente) unabhängig von der Größe für das Aussehen der Kopfzeile (vor und nach dem es sticky ist) verwenden wenn Benutzer nach oben scrollen & down.) Darüber hinaus, wenn der Header selbst vertauscht, wird auch einige glatte Wirkung angezeigt.