import React, { Component } from 'react';
import './navBar.css'
class NavBar extends Component {
	constructor() {
		super();

		this.state = {
			toogleHeader:'header'
        };
        this.changeTitle= this.changeTitle.bind(this)
    }
    componentDidMount() {
        window.addEventListener('scroll', this.changeTitle, { passive: true })
      }

   changeTitle(e) {

    if(window.pageYOffset>=120){
      this.setState({toogleHeader:'header sticky'})
    }
    else if(this.state.toogleHeader=='header sticky'){
      this.setState({toogleHeader:'header'})
    }
  }


	render() {
		return (
			<div>

<div className="top-container" >
  <h1>My Sticky Bar Demo</h1>
  <p>Scroll down to see the sticky effect....</p>
</div>

<div className={this.state.toogleHeader} id="myHeader">
  <button type="button">Button 1</button>
  <button type="button">Button 2</button>
  <button type="button">Button 3</button>
  <button type="button">Button 4</button>
  <button type="button">Button 5</button>
</div>

<div className="content">
  <h3>On Scroll Sticky Header</h3>
  <p>The header will stick to the top when you reach its scroll position.</p>
  <p>Scroll back up to remove the sticky effect.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
    maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam
    omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no
    molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
    maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam
    omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no
    molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
    maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam
    omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no
    molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
    maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam
    omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no
    molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
    maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam
    omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no
    molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
    maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam
    omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no
    molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
    maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam
    omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no
    molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
    maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam
    omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no
    molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
    maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam
    omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no
    molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
    maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam
    omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no
    molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
    maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam
    omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no
    molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
    maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam
    omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no
    molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
    maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam
    omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no
    molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
    maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam
    omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no
    molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
    maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam
    omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no
    molestiae voluptatibus.</p>
</div>
			</div>
		);
	}
}

export default NavBar;