[제이쿼리] 스크롤 방향에 따라 슬라이드 되는 헤더 만들기

동작 원리

사용자의 스크롤이 아래로 향한다면 콘텐츠를 탐색하길 원하는 것이라 간주하고 헤더부분을 감추고, 스크롤이 위로 향한다면 처음으로 돌아가거나 네비게이션을 찾아 이동하는 것으로 간주하여 헤더부분을 재등장 시키는 원리이다.

 

• 헤더 요소에 position: fixed 를 설정한다.
• 스크롤 방향이 아래로 향한다면 헤더 요소에 클래스를 추가하고 이 클래스에 의해 헤더가 위로 사라진다.
• 스크롤 방향이 위로 향한다면 추가한 클래스를 제거하여 헤더 요소가 재등장한다.

 

 

HTML

<header></header>
<main></main>
<footer></footer>

CSS

body { 
	padding-top: 40px; // 헤더 높이만큼 여백부여
}
header {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 40px; 
    background: #f5b335; 
    transition: top 0.2s ease-in-out; 
} 

// 자바스크립트로 추가될 클래스
.nav-up { top: -40px; } // 헤더 높이와 같게

원문의 내용은 위와 같으나 부드러운 효과를 부여하기 위해서는 각종 등장 애니메이션을 적용할 수도 있다. 또한 단순히 트랜지션으로 위치 이동을 제어하는 것보다 트랜스폼(transform)과 트랜지션의 조합이 다양한 기기에서 버벅임없는 자연스러운 효과를 얻을 수 있다.

JQUERY

var didScroll; 

// 스크롤시에 사용자가 스크롤했다는 것을 알림 
$(window).scroll(function(event){ 
	didScroll = true; 
}); 

// hasScrolled()를 실행하고 didScroll 상태를 재설정 
setInterval(function() { 
    if (didScroll) { 
    hasScrolled(); 
    didScroll = false; 
	} 
}, 250); 

function hasScrolled() { 
	// 동작을 구현 
}

$(window).scroll 에 의해 스크롤 이벤트를 감지하여 didScroll 의 변수 값을 true로 설정한다. 매 250ms 마다 didScroll의 변수 값을 체크하여 동작을 구현하고 다시 didScroll의 변수 값을 false로 설정한다. 이는 스크롤될때 마다 전체의 동작을 구현하는 것보다 변수를 설정하는 것이 브라우저의 부하를 덜 수 있는 방법이 된다.

헤더 숨기기

아래의 요구사항에 맞춰질때 헤더를 숨긴다.

1. delta 값 보다 더 스크롤이 되었을 경우
2. 헤더의 높이보다 더 스크롤이 되었을 경우
3. 위 또는 아래로 스크롤이 되었을 경우
4. 변수에 현재의 스크롤 위치를 저장

 

완성된 JQUERY

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

// Hide Header on on scroll down var did Scroll; 
var lastScrollTop = 0;  
var delta = 5;  // 동작의 구현이 시작되는 위치 
var navbarHeight = $('header').outerHeight();  // 영향을 받을 요소를 선택

$(window).scroll(function(event){  //사용자가 스크롤시 스크롤했음을 알림
	didScroll = true; 
}); 

setInterval(function() {  //hasScrolled()를 실행하고 didScroll 상태를 재설정
    if (didScroll) { 
        hasScrolled(); 
        didScroll = false;
    } 
}, 250); 

function hasScrolled() { 
	var st = $(this).scrollTop(); //접근하기 쉽게 현재 스크롤의 위치를 저장한다.
    
	// Make sure they scroll more than delta 
	if(Math.abs(lastScrollTop - st) <= delta) //설정한 delta 값보다 더 스크롤되었는지를 확인한다.
    	return; 
        
	// If they scrolled down and are past the navbar, add class .nav-up. 
	// This is necessary so you never see what is "behind" the navbar. 
	if (st > lastScrollTop && st > navbarHeight){ // 헤더의 높이보다 더 스크롤되었는지 확인하고 스크롤의 방향이 위인지 아래인지를 확인한다.
    	$('header').removeClass('nav-down').addClass('nav-up'); // Scroll Down 
	} else { 
        // Scroll Up 
		if(st + $(window).height() < $(document).height()) { 
        	$('header').removeClass('nav-up').addClass('nav-down');
        } 
    } 
    
    lastScrollTop = st; //lastScrollTop 에 현재 스크롤위치를 지정한다.

}

 

 

출처: https://webdir.tistory.com/481