[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 페이지가 깔끔하여 흉내내봐야겠다. 아직 공사중인 페이지라 적용된 예를 공개할 수가 없어서 조금 아쉽네 
Array
