스크롤을 감지해 헤더를 숨기고 보여주기

개요

헤더를 고정시키는 작업까진 완수했지만, 헤더를 고정시킴으로 인해 단점들이 생겨났었다. 예를 들어, 메뉴를 눌렀을 때, 해당 장소로 이동하긴 하는데 타이틀이 있어야할 곳에 헤더가 가려버린다는 것이다.

이렇게 아니라 아래처럼 보여야한다.

헤더는 고정하고싶고, 타이틀은 보여주고싶었다. 그렇게 되면 모든 부분의 레이아웃을 조정하면 되는데 그러고 싶진않고.. 여러 사이트를 돌아다녀보면서 생각한 것이 스크롤을 내릴땐 헤더가 없고 살짝 올리면 생기는 그런 사이트들이 많았다.

개발

예전 코드에서
window.onscroll할때 scrollFunction이라는 함수를 호출하게 했었고,

window.onscroll = function () {
    scrollFunction();
  };

이 function안에서는 헤더의 보여주고 안보여줌을 결정했고 여기서 계산하면 된다.
케이스는 총 3개가 있고, 이에 따라 보여줌을 결정하면 되는데,
1. 스크롤이 가장 위에있는 경우 -> 헤더가 보인다
2. 스크롤이 가장 위가 아닌데, 스크롤이 올라가고 있다.
3. 스크롤이 가장 위가 아닌데, 스크롤이 아래로 내려가고있다 -> 헤더가 안보인다.

나는 아래와 같이 개발했다.

function scrollFunction() {
    ...
    if(document.getElementById("header") != null){
      let currScrollLoc = document.documentElement.scrollTop;
      if ( currScrollLoc <= 20 ) {
        document.getElementById("header")!.style.position = "relative";
      }
      else if(currScrollLoc > scrollLoc && scrollLoc > 0){
        document.getElementById("header")!.style.position = "relative"; 
      }
      else {
        document.getElementById("header")!.style.position = "fixed"; 
      }

      setScrollLoc(currScrollLoc);
    }
  }

아무튼 오늘도 프론트 앤드 개발자로서 한단계 성장 완료!