So zeigen Sie eine React-Komponente auf Bildlauf

Question

Ich habe eine React-Komponente für ein festgelegtes Nav erstellt, das ich ausgeblendet bleiben möchte, bis ich an einem bestimmten Punkt auf der Seite blättern und dann in die Ansicht gleiten kann. Medium hat einen Header ähnlich dem, was ich beschreibe.

Dies ist eine relativ triviale Aufgabe in jQuery, mit Scrollmagic oder Wegpunkte, aber gibt es eine idiomatische Möglichkeit, dies mit React und Vanille JS zu erreichen?

Answer 1

Im componentDidMount Lifecycle-Haken, tun das gleiche wie in dem jQuery Link Sie gegeben haben:

class Navbar extends React.component { 

    let delta = 5; 

    render() { 
    return (
     <div ref=header></div> 
    ); 
    } 

    componentDidMount() { 
    $(window).scroll(function(event){ 
     var st = $(this).scrollTop(); 

     if(Math.abs(this.state.lastScrollTop - st) <= delta) 
     return; 

     if (st > lastScrollTop){ 
     // downscroll code 
     // $(this.refs.header).css('visibility','hidden').hover() 
     this.setState({ 
      navbarVisible: false 
     }); 
     } else { 
     // upscroll code 
     $(this.refs.header).css('visibility','visible'); 
     this.setState({ 
      navbarVisible: true 
     }); 
     } 
     lastScrollTop = st; 
    }.bind(this)); 

    } 
} 

Answer 2

Reagieren Way mit Vanille JS jsfiddle;

vergessen Sie nicht, EventListener zu entfernen. In diesem Beispiel Komponenten machen, wenn nur ist es notwendig

class TopBar extends React.Component { 
    constructor(props){ 
     super(props); 
     this.state={isHide:false}; 
     this.hideBar = this.hideBar.bind(this) 
    } 
    hideBar(){ 
     let {isHide} = this.state 
     window.scrollY > this.prev? 
     !isHide && this.setState({isHide:true}) 
     : 
     isHide && this.setState({isHide:false}) 

     this.prev = window.scrollY; 
    } 
    componentDidMount(){ 
     window.addEventListener('scroll',this.hideBar); 
    } 
    componentWillUnmount(){ 
     window.removeEventListener('scroll',this.hideBar); 
    } 
    render(){ 
     let classHide=this.state.isHide?"hide":"" 
     return <div className={"topbar "+classHide}>topbar</div>; 
    } 
} 

Answer 3

Sie eine Komponente wie react-headroom verwenden könnte für Sie die schwere Arbeit zu tun. Oder Sie können immer noch Wegpunkte in React verwenden, indem Sie sie in componentDidMountlifecycle method setzen und unter Verwendung von componentWillUnmount entfernen.

Answer 4

Ich habe eine Reaktionskomponente für genau diesen Bedarf erstellt, da ich keine anderen Implementierungen finden konnte, die mit dem übereinstimmten, was ich brauchte. Selbst react-headroom hat Ihnen nicht etwas gegeben, das nach dem Erreichen eines bestimmten Punktes auf der Seite nur hineinrollen würde.

Der Kern ist hier: https://gist.github.com/brthornbury/27531e4616b68131e512fc622a61baba

ich den Komponentencode keinen Grund sehen, hier zu kopieren. Der Code basiert weitgehend auf dem react-headroom Code, tut aber weniger und ist daher einfacher.

Die Komponente ist das erste Stück Code, Sie könnten einfach kopieren/einfügen und dann importieren. Nachdem Sie den Code mit dem navbar importieren würde wie folgt aussehen:

class MyScrollInNavBar extends Component { 
    render() { 
     return (
     <ScrollInNav scrollInHeight={150}> 
      <MyNavBar /> 
     </ScrollInNav> 
    ); 
    } 
}