React Material-UI Cookbook

How it works...

Let's take a look at the state method and the onScroll() method of the ScrolledAppBar component:

state = {  scrolling: false,  scrollTop: 0};onScroll = e => {  this.setState(state => ({    scrollTop: e.target.documentElement.scrollTop,   scrolling:      e.target.documentElement.scrollTop > state.scrollTop  }));};componentDidMount() {  window.addEventListener('scroll', this.onScroll);}componentWillUnmount() {  window.removeEventListener('scroll', this.onScroll);}

When the component mounts, the onScroll() method is added as a listener to the scroll event on the window object. The scrolling state is a Boolean value that hides the AppBar component when true. The scrollTop state is the position of the previous scroll event. The onScroll() method ...