스크롤 내리면 줄어드는 고정 헤더 만들기

fixed로 되어있는 고정 헤더를 특정 스크롤 위치에 도달하면 줄어드는 헤더를 만들고자 합니다. HTML, CSS, jquery를 이용해서 만들어보겠습니다.

 

고정 헤더 높이 설정 예제

$(function(){
	var shrinkHeader = 300;
    $(window).scroll(function(){
    	var scroll = getCurrentScroll();
        if(scroll >= shrinkHeader){
        	$('.header').addClass('shrink');
        }else{
        	$('.header').removeClass('shrink');
        }
    });
    function getCurrentScroll(){
    	return window.pageYOffset || document.documentElement.scrollTop;
    }
});

전체 코드보기

 

shrinkHeader에 300이라는 높이를 설정하고 scroll에는 getCurrentScroll 함수를 만들었습니다. 이 함수에는 현재의 스크롤바 픽셀과 위로부터의 스크롤바 픽셀을 리턴해줍니다. 따라서 이 함수는 웹 페이지가 위로부터 얼마나 스크롤되었는지 알려고 할 때 사용할 수 있습니다.

 

scroll이 300보다 같거나 크다면 header 클래스에 shrink라는 클래스를 추가하여 높이값을 설정했습니다. 반대로 300보다 작으면 shrink 클래스를 삭제했습니다. 

 

용어 설명

window.pageYOffset

현재의 스크롤 높이값을 반환해줍니다. 크롬에서는 잘 나오지만 IE에서는 9버전 이하에서는 지원하지 않습니다.