스크롤 reactJS의 끈적한 navbar

기본적으로 반응에서 다음 Navbar를 달성할 수 있는 방법을 보여줍니다.


먼저 파일을 만든 다음 이름을 Navbar로 지정해야 합니다.
추가하다
'.Navbar'에서 가져오기
앱 또는 홈 구성 요소에서
그런 다음 생성한 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

css 파일을 만들고 css에 대한 벨로우즈 코드를 붙여넣고 헤더 색상을 취향에 맞게 편집하십시오.

*{
  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%;
}