[JQuery] 스크롤에 따라 슬라이드 되는 헤더 만들기

이 블로그를 보면 스크롤을 내렸을때 헤더가 숨겨지고

스크롤을 올리면 다시 헤더가 나타나는걸 볼 수 있다.

이 기능의 장점은 일반적으로 이용자는 스크롤을 내리면서 콘텐츠를 보는데

헤더가 숨겨지면 모바일에서 훨씬 더 넓은 영역으로 콘텐츠를 볼 수 있다는 거다.

이 기능은 자바스크립트로 스크롤 값을 받아서

제이쿼리로 그 값에 맞게 CSS 값을 변경해 준다.

먼저 HTML을 작성해 본다.

<header>
	<div id="header"></div>
</header>

ID 값이 header인 div 안에 헤더에 필요한 내용을 작성하면 된다.

그 다음은 CSS를 작성한다.

#header {
	width: 100%;
	height: 50px;
	z-index: 10;
	top: 0px;
	position: fixed;
	background-color: #3591FE;
	border-bottom: 1px solid rgba(150, 150, 150, 0.2);
	box-sizing: border-box;
	transition: All 0.2s ease;
	-webkit-transition: All 0.2s ease;
	-moz-transition: All 0.2s ease;
	-o-transition: All 0.2s ease;
}

CSS는 position을 fixed로 잡아주고 top은 0을 준다.

그리고 나는 애니메이션 효과를 주기 위해 transition을 줬다.

마지막으로 자바스크립트를 작성한다.

$(function(){
    var lastScrollTop = 0, delta = 15;
    $(window).scroll(function(event){
       var st = $(this).scrollTop();
       
       if(Math.abs(lastScrollTop - st) <= delta)
          return; // 스크롤값을 받아서 리턴한다.
if ((st > lastScrollTop) && (lastScrollTop>0)) {
      $("#header").css("top","-50px"); // 스크롤을 내렸을때 #header의 CSS 속성중 top 값을 -50px로 변경한다.
  
   } else {
      $("#header").css("top","0px"); // 스크롤을 올렸을때 #header의 CSS 속성중 top 값을 0px로 변경한다.
   }
       lastScrollTop = st;
    });
});

이렇게 간단하게 구현이 가능하다.

그냥 티스토리 블로그나 간단하게 이용하려면 소스를 복사해서 사용하면 된다.

예제를 확인해 보자.

See the Pen [JQuery] 스크롤에 따라 슬라이드 되는 헤더 만들기 by biggerbig (@biggerbig) on CodePen.