Blog

[Javascript] 스크롤이 내려가면 줄어드는 헤더

February 12, 2015

[Javascript] 스크롤이 내려가면 줄어드는 헤더

스크롤이 내려가면 헤더를 작게 만들어서 고정시키는 방법이 많이 쓰인다. http://edition.cnn.com/ 을 보면 어떤 것인지 쉽게 알 수 있다. 그리고 가로 창 사이즈를 줄이면 모바일에 적합한 형태로 바로 전환되는 반응형 디자인이 적용되어 있다.

특정 픽셀보다 아래로 내려가면, 헤더를 줄이는 기능은 아래와 같이 설정한다.

function scrollShrink() { 
    window.addEventListener('scroll', function(e){
        var distanceY = window.pageYOffset || document.documentElement.scrollTop,
            shrinkOn = 150; // 기준점인 y 픽셀. 
            
        if (distanceY > shrinkOn) { // 줄어든 헤더 버전
            $("#search").hide();
            $("#logo-image-desktop").css("height","45");
        } else { // 평소 헤더 버전
            $("#search").show();
            $("#logo-image-desktop").css("height","85");
        }
    });         
}

그리고 페이지가 로드될 때 바로 호출되도록 설정한다.

<body onload="javascript:scrollShrink();">

나는 부트스트랩을 활용해서 페이지로 만들고 있는데, 헤더에 navbar-fixed-top 클래스가 적용되어 있어야 한다.

<header class="navbar navbar-inverse navbar-fixed-top wet-asphalt" role="banner">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand-desktop" href="index.php"><img src="images/logo.png" alt="logo" id="logo-image-desktop"></a>
        </div>
    </div>
</header>

이렇게 구현했을 경우에 검색창이 보였다가 안 보였다가 하는 것이 영 신경쓰였는데, 샘플로 찾아본 CNN 페이지가 깔끔하여 흉내내봐야겠다. 아직 공사중인 페이지라 적용된 예를 공개할 수가 없어서 조금 아쉽네 :)