Reagieren - Schieben Sie die feste Navigationsleiste nach oben auf der Bildlaufleiste nach unten und schieben Sie sie nach unten nach oben

Question

tl; dr Blättern Sie nach unten für die Lösung, die für mich funktioniert hat!

Wie man eine Folie auf einer festen navbar in einer Reaktion auf und ab bewegt?

Was ist der bessere Ansatz mit refs oder mit dem componentDidMount lifecycle hook?

hideNav = (navbar) => { 
    const hide =() => { 
     let lastScrollTop = 0; 
     const currentScrollTop = navbar.scrollTop; 

     // scroll down 
     if (currentScrollTop > lastScrollTop) { 
     navbar.classList.add('hidden'); 
     } else { 
     // scroll up 
     navbar.classList.remove('hidden'); 
     } 
     lastScrollTop = currentScrollTop; 
    }; 

    window.addEventListener('scroll', hide); 
    }; 

... weiter nach unten in der Render-Methode:

render() { 
     return <Navbar ref={this.hideNav} /> 

UPDATE:

Lösung:

class Navbar extends React.Component { 
    state = { 
    auth: false, 
    slide: 0, // How much should the Navbar slide up or down 
    lastScrollY: 0, // Keep track of current position in state 
    }; 

    componentWillMount() { 
    // When this component mounts, begin listening for scroll changes 
    window.addEventListener('scroll', this.handleScroll); 
    } 

    componentWillUnmount() { 
    // If this component is unmounted, stop listening 
    window.removeEventListener('scroll', this.handleScroll); 
    } 

    handleScroll =() => { 
    const { lastScrollY } = this.state; 
    const currentScrollY = window.scrollY; 


    if (currentScrollY > lastScrollY) { 
     this.setState({ slide: '-48px' }); 
    } else { 
     this.setState({ slide: '0px' }); 
    } 
    this.setState({ lastScrollY: currentScrollY }); 
    }; 

    render() {  
    return (
     <Navbar 
     style={{ 
      transform: `translate(0, ${this.state.slide})`, 
      transition: 'transform 90ms linear', 
     }} 
     /> 
    ); 
    } 
} 

ich keine Optimierungen noch nicht getan haben Es wird empfohlen, das Ereignis mit requestAnimationFrame, setTim zu drosseln eout oder customEvent. Like here.

Answer 1

Sie sollten Refs nicht als Lösung verwenden, um Ereignislistener zu registrieren oder Klassen hinzuzufügen/zu entfernen. Wie Sie vorgeschlagen haben, sollten Sie die Komponenten-Lebenszyklus-Hooks verwenden, um mit Scrollen im Fenster zu beginnen (und zu stoppen).

export default class App extends Component { 
    state = { hidden: false }; 

    constructor(props) { 
    super(props); 

    // Bind the function to this component, so it has access to this.state 
    this.handleScroll = this.handleScroll.bind(this); 
    } 

    componentWillMount() { 
    // When this component mounts, begin listening for scroll changes 
    window.addEventListener('scroll', this.handleScroll); 
    } 

    componentWillUnmount() { 
    // If this component is unmounted, stop listening 
    window.removeEventListener('scroll', this.handleScroll); 
    } 

    handleScroll(e) { 
    let lastScrollTop = 0; 
    const currentScrollTop = navbar.scrollTop; 

    // Set the state of hidden depending on scroll position 
    // We only change the state if it needs to be changed 
    if (!this.state.hidden && currentScrollTop > lastScrollTop) { 
     this.setState({ hidden: true }); 
    } else if(this.state.hidden) { 
     this.setState({ hidden: false }); 
    } 
    lastScrollTop = currentScrollTop; 
    } 

    render() { 
    // We pass a hidden prop to Navbar which can render className="hidden" if the prop is true 
    return (
     <Navbar hidden={this.state.hidden} /> 
    ); 
    } 
} 

Auch an der Scroll-Funktion suchen Sie zur Verfügung gestellt, es wird nicht funktionieren, da lastScrollTop immer 0. Wenn Sie eine Scroll-Lösung befinden sich in dieser Antwort einen Blick darauf werfen, wie es eine ähnlich Lösung zu dem, was Ihre feste navbar benötigen würde (außer Verstecken, anstatt gezeigt zu werden): Sticky Header after scrolling down