CODEWITHSUNDEEP
javascriptcssreactjs
TrevPennington
TrevPennington

Reputation: 475

React changing style of NavBar on scroll

I'm practicing some React here. I'd like my NavBar to get a backgroundColor past a certain scroll point which I've done, but when I scroll back to the top the backgroundColor does not change back to none. Thanks for the help in advance. 

const top = {backgroundColor: 'none'}
const scrolled = {backgroundColor: 'rgba(0,0,0,0.4)'}


class NavBar extends React.Component {
  constructor() {
    super();
    this.state = {style: top};

    this.handleScroll = this.handleScroll.bind(this);
  }

  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
  }
  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
  }

  handleScroll = e => {

    if (window.scrollY < 200) {
      this.setState({style: top})
    } else if (window.scrollY > 200) {
      this.setState({style: scrolled})
    }
  }

  render() {

    return (

      <div className='navBarContainer'>
        <nav className = 'navBar' onScroll={this.handleScroll} style={this.state.style}>
            <a className='navItem home' href='#'>SAINT<br />BARLEY<br />ROASTING</a>
            <a className='navItem shop' href='#'>shop</a>
            <a className='navItem blog' href='#'>blog</a>
            <a className='navItem bio' href='#'>bio</a> 
        </nav>

      </div>
    )
  }
}

Upvotes: 2

Views: 360

Answers (1)

Zheng
Zheng

Reputation: 76

none is invalid for backgroundColor.

try const top = {backgroundColor: 'transparent'} instead.

Upvotes: 1

Related Questions