[Javascript] 스크롤 내리면 사라지고 스크롤 올리면 나타나는 navbar

스크롤하는 것을 잘 보면 스크롤을 내릴 때 navbar가 사라지고 스크롤을 올리면 navbar가 위에서 스르륵 나온다. 이렇게 구현하게 되면 사이트에 방문한 사람들이 스크롤을 내리면서 내용에 잘 집중할 수 있을 것이고 메뉴를 통해서 다른 페이지로 이동하고자 할 때 굳이 맨 위로 올라가지 않아도 그 자리에서 스크롤 한 번만 위로 해주면 navbar가 나오기 때문에 아주 좋은 navbar 구현법이라고 생각한다.

 

HTML

  <div class="navbar">저는 navbar입니다.</div>

  <div class="section"></div>

 

CSS

.navbar{

  width: 100%;

  height: 100px;

  background-color: black;

  color: white;

  font-size: 60px;

  padding: 0 30px;

}

.section{

  width: 100%;

  height: 3000px;

  background-color: aquamarine;

}

.fixed{

  position: fixed;

  animation: fixed-ani 0.3s;

}

@keyframes fixed-ani {

  0% {

      transform: translateY(-60px)

  }

  100% {

      transform: translateY(0px)

  }

}

스크롤에 따라 fixed 클래스를 부여하고 떼어내고 하는 방식으로 구현했다.

 

JAVASCRIPT

let preScroll = 0;

window.addEventListener('scroll',function(){

  let currentScroll = window.scrollY

  if(currentScroll>preScroll){

    document.querySelector('.navbar').classList.remove('fixed');

  } else{

    document.querySelector('.navbar').classList.add('fixed');

  }

  preScroll = currentScroll;

})

생각보다 구현법은 간단했다.

먼저 이전 scroll값을 담을 변수를 하나 만들어주고 scroll이벤트리스너 안에 현재 스크롤 값을 담아주는 변수도 만들어준다. 그리고 if문으로 현재 스크롤 값이 이전 스크롤 값보다 크면 fixed 클래스를 떼어주고, 작으면 fixed 클래스를 부여해주는 방식으로 구현한 후, preScroll에 currentScroll값을 대입해준다. 

 

현재 스크롤 값이 이전 스크롤 값보다 크다는 말은 스크롤을 아래로 내렸을 때를 의미하고, 반대로 작다는 말은 스크롤을 위로 올렸을 때를 의미한다.

 

preScroll에 currentScroll값을 마지막에 대입해주는 이유는 자바스크립트는 동기적인 언어, 즉 위에서 아래로 코드를 읽어주기 때문에 if문 이전에 currentScroll값을 대입해주면 두개의 값을 비교하기 전에 이미 같은 값으로 되어버리기 때문에 검사를 해보면 동일한 값으로 계속 나온다. 따라서 먼저 두 변수의 값을 비교해주고 나서 대입해주면 비교할 때의 값은 차이가 나기 때문에 구현이 가능해진다.

 

포인트는 이전 값을 감지, 즉 저장해준다는 것이다.