Want to reveal a React component on scroll? In the componentDidMount lifecycle hook, do the same thing as in the jQuery link you have given:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | 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)); } } |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
