제이쿼리 스크롤 상단 메뉴 고정

웹사이트의 메뉴바가 평소에는 원래 위치에 있다가 스크롤을 하여 메뉴가 올라갈 때 메뉴를 상단에 고정시켜주는 jQuery 소스입니다. 메뉴 바에는 대부분의 블로그나 사이트의 중요 링크가 되어있어 스크롤 중에도 메뉴 클릭이 용이하여 방문자의 체류 시간을 늘리는데 도움이 되고 방문객에게 사이트 이동이 쉬워지기 때문에 운영자나 방문객 모두에 도움이 됩니다.

 

<div class="menuWrap">
	<div class="blogmenu">
    	

  
Home
  
Bank
  
Card
  
꿈해몽
  
Guest Book
 
    </div>
</div>

상단에 고정 시킬 기존 메뉴 코드에 div 코드를 한번 더 적용합니다. DIV 클래스명 blogmenu 메뉴이고 menuWrap 가 제이쿼리를 적용하여 메뉴를 들어 올리기 위해 한번 더 적용한 것입니다.

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type=text/javascript>
$(document).ready(function(){
    var nav = $('.menuWrap');
    $(window).scroll(function () {
        if ($(this).scrollTop() > 312) {
            nav.addClass("float-menu");
        }else {
            nav.removeClass("float-menu");
        }
    });
});
</script>

var nav = $('.menuWrap'); 에 상단 고정 메뉴 적용을 위해 한번 더 적용한 DIV 클래스명을 적어 줍니다. float-menu는 스크롤을 내릴 때 var nav에 적어준 DIV에 추가로 클래스명을 추가해줍니다. scrollTop의 312 수치는 메뉴 고정을 시작하는 수치로 스크롤을 움직이지 않은 상태에서 브라우저 상단과 메뉴와의 거리를 입력합니다.

 

스크롤을 내리면 사진처럼 float-menu 클래명이 하나 더 생기면 적용되지 않았던 float-menu의 스타일이 적용되어 상단 고정이 가능하게 됩니다.

 

.menuWrap {  }
.float-menu { 
	top:0; 
    width:98%;
    position:fixed;
    z-index:9999; 
    opacity:0.9; 
} 
.blogmenu { 
	margin:0 0 10px;
    padding:5px 0;
    width:970px;
    background:#fff;
    border-bottom:1px solid #666;
}

다른 태그에는 적당히 자신의 속성을 적용하시면 되고. float-menu에는 상단에 고정을 위해 position:fixed; 속성은 필수로 들어가야 합니다. top:0;은 상단에 고정을 위함으로 수치를 입력하면 브라우저 상단에서 수치만큼 떨어지게 됩니다.

 

위 소스는 현재 블로그에 사용 중인 코드입니다.