스크롤 reactJS의 끈적한 navbar

import React from 'react'
import './Navbar.css'
class Navbar extends React.Component {
  listener = null;
  state = {
    nav:false
  }
  componentDidMount() {
     window.addEventListener("scroll", this.handleScroll);
   }
   componentWillUnmount() {
      window.removeEventListener('scroll');
    }
   handleScroll= () => {
     if (window.pageYOffset > 140) {
         if(!this.state.nav){
           this.setState({ nav: true });
         }
     }else{
         if(this.state.nav){
           this.setState({ nav: false });
         }
     }

   }

  render(){
  return (
    <div>
    <div className={`Nav ${this.state.nav && 'Nav__black'}`}>
    <img src='imgleftlink'/>
    <img src='imgrightlink' />
    </div>
    </div>
  );}
}
export default Navbar

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.Nav {
  margin-left: -40px;
  position: fixed;
  z-index: 2;
}
img ~ img  {
  position: fixed;
  right: 10px;
  top:8px;
}
.Nav__logo{
  margin-top: 12px;
}
.Nav__black{
  z-index: 2;
  background: rgba(0, 0, 0, 0.95);
  width: 100%;
}