상하로 화면 스크롤 시 jQuery로 상단 메뉴(레이어) 고정 시키기

모바일에서 화면을 위로 스크롤 할 때 상단 메뉴가 화면 위로 사라지게 된다. 이럴 때 메뉴를 화면에 고정 시켰다가 다시 아래로 스크롤하면 메뉴를 원위치 시키는 스크립트이다.

//-- html 파일 --
<div id="nav_box">상단 메뉴</div>

<script>
$(window).scroll(function(){
	var docuTop = $(document).scrollTop();
	if(docuTop > 100){
		$("div#nav_box").css({"position" : "fixed", "top" : "-15px", "width" : "100%", "z-index" : 999, "border-bottom" : "5px solid #FF8000"})
	}else{
		$("div#nav_box").css({"position" : "relative", "top" : "", "border-bottom" : ""});
	}
});
</script>

설명
○ $(window).scroll(function() {});
화면 스크롤 이벤트가 발생할 때마다 실행하는 함수

○ $(document).scrollTop()
화면의 현재 Top 위치를 숫자로 반환한다. 예를들어 화면이 위로 100px 만큼 올라갔다면 함수는 숫자 100을 반환한다.

○ $("div#nav_box").css({"position" : "fixed", "top" : "-15px", "width" : "100%", "z-index" : 999, "border-bottom" : "5px solid #FF8000"})
style을 만들어서 addClass와 removeClass를 이용하면 되지만 편의상 css를 바로 적용해도 무관한다. css()를 여러번 사용하는 것보다 JSON 형태로 속성 값을 넘겨주는 게 관리하기 편하다. postion에 fixed 속성을 주어 메뉴가 있는 div를 고정 시키는 게 중요하다.

○ $("div#nav_box").css({"position" : "relative", "top" : "", "border-bottom" : ""});
div 속성을 다시 relative로 바꾸고 top과 메뉴를 구분하기 위해 추가했던 border-bottom 값을 제거하는데 메뉴 style은 상황에 따라 각자 변경하면 된다.