fixed , sticky 정리 (추가로 React에서 스크롤이벤트)

fixed

위 속성을 적용하게 되면 일반적인 문서 요소 순서에 따라 배치되는 것이 아니라

페이지 화면 내 절대적인 위치에 고정시킬 수 있다.

스크롤과 상관없이 항상 해당 위치에 고정된다.

출처: https://ordinary-code.tistory.com/106 [김평범's OrdinaryCode:티스토리]

 

대표적인 예로 스크롤과 상관없이 계속 위 상단에 고정되는 Header들이 fixed 속성에 해당된다. 

또한 내가 삽질한 예시를 보면 더 이해가 빠를 듯하다.

 

fixed 는 항상 페이지에서 고정된 위치에 존재하기 때문에 다음과 같이 footer 안에 들어가는 참사가 발생할 수 있다.

내가 원하는 대로 구현을 하려면 sticky나 fixed + js 조합을 사용해야했다.

 

sticky

위 속성을 적용하게 되면 일반적인 문서요소 순서에 따라서 배치가 되는 것은 fixed랑 동일하나

가장 가까운 부모 element를 기준으로 배치가 된다.

해당 조상의 스크롤 위치가 도달하면 그때부터 fixed처럼 지정한 위치에 고정되기 시작해서 

해당 조상의 위치가 스크롤을 벗어나면 고정되던 위치가 사라진다.

 

각각의 콘텐츠마다 고정해야 되는 내용이 달라져야 되는 경우에는 sticky를 이용하면 

좀 더 콘텐츠에 맞는 내용을 고정시켜 사용자에게 명확한 정보를 전달해줄 수 있다.

출처: https://ordinary-code.tistory.com/106 [김평범's OrdinaryCode:티스토리]

 

나는 비록 fixed 와 js 를 사용해서 구현하였긴 했지만 sticky를 처음부터 생각했다면 간단하게 구현 했으리라고 생각된다.

안돼.. 이제 알았으니까 다음에 이런일이 생기면 sticky를 상기해야겠다.

다음처럼 footer 전에 딱 멈출 수 있게 된다.

 

fixed + JS

나는 fixed로 레이아웃을 구성했기때문에 아예 sticky 를 사용할 수 있도록 갈아 엎을까? 하다가 JS 를 사용하는게 좀 더 빠르지 않을까 싶어서 fixed + 마우스 스크롤을 사용해서 sticky 처럼 구현이 되도록 만들었다.

 

코드는 다음과 같다. 

useRef 를 사용하여 스크롤의 높이를 얻을 수 있었다.

addEventListener를 사용해서 스크롤이 될때마다 높이를 얻을 수 있었고, 현재 페이지의 스크롤 높이 + 1100 > body.scrollHeight 보다 커질때 top을 0px로 바꾸어주고 else 일떄는 150px 를 주어서 구현하였다.

  const detectScroll = useRef();
  const listener = () => {
    if (window.pageYOffset + 1100 > document.body.scrollHeight)
      detectScroll.current.style.top = "0px";
    else {
      detectScroll.current.style.top = "150px";
    }
  };

  useEffect(() => {
    console.log(document.body.scrollHeight);
    window.addEventListener("scroll", listener);
    return () => {
      window.removeEventListener("scroll", listener);
    };
  }, []);