Come rivelare un componente React su scroll

Question

Ho creato un componente React per un navigatore fisso che vorrei rimanere nascosto, fino a quando non oltrepasso un determinato punto della pagina, quindi scorro in vista. Medium ha un'intestazione simile a quella che sto descrivendo.

Questo è un compito relativamente banale in jQuery, con scrollmagic o waypoint ma esiste un modo idiomatico di eseguire ciò con React e vanilla JS?

Answer 1

nel gancio componentDidMount ciclo di vita, fanno la stessa cosa, come nel link jQuery hai dato:

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

Reagire Way con vaniglia JS jsfiddle;

non dimenticare di rimuovere EventListener. In questo esempio componente renderà se non altro è neccessary

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

è possibile utilizzare un componente come react-headroom per fare il lavoro pesante per voi. Oppure puoi ancora utilizzare i waypoint in React, configurandolo nello componentDidMountlifecycle method e rimuovendolo usando componentWillUnmount.

Answer 4

Ho creato un componente di reazione per questo stesso esatto bisogno in quanto non sono riuscito a trovare altre implementazioni che corrispondessero a ciò di cui avevo bisogno. Anche react-headroom non ti ha dato qualcosa che si sarebbe semplicemente spostato dopo aver raggiunto un certo punto della pagina.

il succo è qui: https://gist.github.com/brthornbury/27531e4616b68131e512fc622a61baba

Non vedo alcuna ragione per copiare il codice del componente qui. Il codice è in gran parte basato sul codice react-headroom ma fa meno ed è quindi più semplice.

Il componente è il primo pezzo di codice, è sufficiente copiare/incollare e quindi importarlo. Dopo aver importato il tuo codice con la barra di navigazione sarebbe simile a questo:

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