/Javascript/Bootstrap/React bootstrap hide toggle menu when scrolling down

React bootstrap hide toggle menu when scrolling down

  import React, { Component } from 'react';

   class App extends Component {

   constructor(props) {
    super(props);

      this.state = {  scrollBackground: 'nav-bg' };
      this.handleScroll = this.handleScroll.bind(this);
   }


   handleScroll(){
      this.setState ({
         scrollBackground: !this.state.scrollBackground
       })
    }

 render() {
 const scrollBg = this.scrollBackground ? 'nav-bg scrolling' : 'nav-bg';

 return (
   <div>

       <Navbar inverse toggleable className={this.state.scrollBackground} 
                                  onScroll={this.handleScroll}>
        ...
      </Navbar>

    </div>
   );
  }
}

export default App;

Source: stackoverflow.com

Similar codes

9 votes345 views3 answers
Bootstrap blue outline button
CSS Bootstrap
22 votes366 views2 answers
React-bootstrap example
Javascript Bootstrap
16 votes367 views2 answers
Toggle bootstrap modal with jquery
Javascript Bootstrap
116 votes395 views6 answers
Bootstrap react
Javascript Bootstrap
15 votes391 views8 answers
React bootstrap
Javascript Bootstrap
3 votes332 views2 answers
Bootstrap 5 pagination
CSS Bootstrap
0 vote389 views1 answer
How to set the scroll in bootstrap4 table body
CSS Bootstrap
0 vote377 views2 answers
Scrollspy bootstrap 5
Javascript Bootstrap
44 votes383 views5 answers
Breakpoint bootstrap
CSS Bootstrap
10 votes368 views4 answers
Bootstrap badges Links
CSS Bootstrap