/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

40 votes254 views6 answers
How to add bootstrap in angular
Javascript Bootstrap
0 vote175 views1 answer
React bootstrap make col disapear in small screens
Javascript Bootstrap
0 vote200 views1 answer
React bootstrap css module use media query mixin
CSS Bootstrap
0 vote199 views1 answer
Bootstrap accordion some change
CSS Bootstrap
13 votes229 views3 answers
Angular.json bootstrap path
Javascript Bootstrap
253 votes344 views10 answers
Bootstrap cdn
Javascript Bootstrap
34 votes185 views6 answers
Rounded bootstrap
Javascript Bootstrap
0 vote175 views1 answer
On click a button triger a tab bootstrap 5
Javascript Bootstrap
0 vote186 views1 answer
Bootstrap jquery popper and js cdn
Javascript Bootstrap
0 vote210 views1 answer
How to pass js data in bootstrap modal body without using input tag
Javascript Bootstrap