[React] React Navbar fixed

2023-02-20

React 의 useState 와 useEffect를 이용하여 화면 스크롤이 일정 부분 아래로 내려갔을때 상단의 네비게이션을 고정시키는 함수를 아래와 같이 작성해보았다.

scrollY 값에 따라 Boolean 값 부여하기

const [scrollY, setScrollY] = useState(0);
const [scrollActive, setScrollActive] = useState(false);

function scrollFixed = () => {
  if(scrollY > 150) {
    setScrollY(window.pageYOffset);
    setScrollActive(true);
  } else { 
    setScrollY(window.pageYOffset);
    setScrollActive(false);
  }
}

scorllY 의 높이가 150 이상일때 해당 높이값을 저장하고 그에 따라 scrollActive의 Boolean값을 변경해주는 함수를 작성하였다.

스크롤 이벤트 감지 및 함수 호출하기

const [scrollY, setScrollY] = useState(0);
const [scrollActive, setScrollActive] = useState(false);

useEffect(() => {
  function scrollListner = () => {
    window.addEventListener('scroll', scrollFixed);
  };
  scrollListener();
  return () => {
    window.removeEventListenr('scroll', scrollFixed);
  };
});

화면이 초기 렌더링 되었을때 화면 스크롤 이벤트를 감지하고 scrollFixed함수를 실행시키는 함수가 실행되고, useEffect는 화면이 동작할때마다 연속해서 실행되기 때문에 해당 동작을 무한 반복하지 않도록 끝내는 함수를 return에 작성해 주었다.

<div className={scrollActive ? "fixed" : "fixed off"}>

JSX 부분에 scrollActive의 값이 true일때 fixed 클래스를 적용하고 false일때 fixed off클래스를 주는 구문을 작성하여 특정 스크롤 높이에서 네비게이션 바가 고정되도록 작성하였다.