CODEWITHSUNDEEP
javascriptreactjsscroll
Wilhelm
Wilhelm

Reputation: 1437

How to reveal a React component on scroll

I've created a React component for a fixed nav that I would like to remain hidden, until I scroll past a certain point on the page, then slides into view. Medium has a header similar to what I'm describing.

This is a relatively trivial task in jQuery, with scrollmagic or waypoints but is there an idiomatic way of accomplishing this with React and vanilla JS?

Upvotes: 21

Views: 30721

Answers (4)

Kokovin Vladislav
Kokovin Vladislav

Reputation: 10391

React Way with vanilla JS jsfiddle;

don't forget to remove EventListener. In this example component will render if only it is neccessary

class TopBar extends React.Component {
    state = { isHide: false };

    hideBar = () => {
       const { 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(){
        const classHide = this.state.isHide ? 'hide' : '';
        return <div className={`topbar ${classHide}`}>topbar</div>;
    }
}

Upvotes: 20

brthornbury
brthornbury

Reputation: 3696

I created a react component for this same exact need as I could not find any other implementations that matched what I needed. Even react-headroom did not give you something that would just scroll in after reaching a certain point on the page.

The gist is here: https://gist.github.com/brthornbury/27531e4616b68131e512fc622a61baba

I don't see any reason to copy the component code here. The code is largely based off of the react-headroom code but does less and is therefore simpler.

The component is the first piece of code, you could simply copy/paste then import it. After importing your code with the navbar would look something like this:

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

Upvotes: 0

Peteris Bikis
Peteris Bikis

Reputation: 221

You could use a component such as react-headroom to do the heavy lifting for you. Or, you can still use waypoints in React, setting it up in the componentDidMount lifecycle method and removing it using componentWillUnmount.

Upvotes: 12

Piyush.kapoor
Piyush.kapoor

Reputation: 6803

In the componentDidMount lifecycle hook, do the same thing as in the jQuery link you have given:

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

  }
}

Upvotes: 0

Related Questions