Как выявить компонент React на прокрутке

Я создал компонент React для фиксированного nav, который я бы хотел скрывать, пока я не прокручу мимо определенной точки на странице, а затем покажут в поле зрения. Medium имеет заголовок, похожий на то, что я описываю.

Это относительно тривиальная задача в jQuery, с прокруткой или путевыми точками, но есть ли идиоматический способ выполнить это с помощью React and vanilla JS?

Ответ 1

Вы можете использовать компонент, например react-headroom, чтобы сделать тяжелую работу для вас. Или вы все равно можете использовать путевые точки в React, настроив его в методе жизненного цикла componentDidMount и удалив его с помощью componentWillUnmount.

Ответ 2

Реагировать с ванили JS jsfiddle;

не забудьте удалить EventListener. В этом примере компонент будет отображаться, если только это необходимо

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

Ответ 3

В хукере жизненного цикла componentDidMount сделайте то же самое, что и в приведенной ссылке jQuery:

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

  }
}

Ответ 4

Я создал компонент реакции для этой же самой точной потребности, поскольку я не мог найти никаких других реализаций, которые соответствовали бы тем, что мне было нужно. Даже react-headroom не дал вам то, что просто прокручивалось после достижения определенной точки на странице.

Суть здесь: https://gist.github.com/brthornbury/27531e4616b68131e512fc622a61baba

Я не вижу причин для копирования кода компонента здесь. Код в значительной степени основан на коде react-headroom, но делает меньше и, следовательно, проще.

Компонент является первой частью кода, вы можете просто скопировать/вставить, а затем импортировать его. После импорта кода с помощью navbar будет выглядеть примерно так:

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