2018.11.15 22:13

상하로 화면 스크롤 시 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은 상황에 따라 각자 변경하면 된다.

        

Trackback 0 Comment 0