jQuery / 스크롤해도 상단에 고정되는 메뉴 만들기
상단 고정 메뉴
웹페이지의 내용이 많으면 아래로 스크롤해서 보게 됩니다. 그러면 페이지에 있는 모든 내용이 움직이고 상단에 있는 메뉴도 위로 사라지게 됩니다. 이렇게 되면 페이지의 내용을 다 보고 다른 메뉴로 이동하려 할 때 다시 문서의 위로 스크롤해서 올라가야 하는 불편이 있습니다. 모바일 기기에서라면 더욱 불편합니다. 이 불편을 해소하는 방법 중의 하나가 메뉴를 고정시키는 것입니다.
jQuery를 이용한 상단 고정 메뉴
다음은 jQuery를 이용한 상단 고정 메뉴 예제입니다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> body { margin: 0px; padding: 0px; } .jbTitle { text-align: center; } .jbMenu { text-align: center; background-color: yellow; padding: 10px 0px; width: 100%; } .jbContent { height: 2000px; } .jbFixed { position: fixed; top: 0px; } </style> <script src="//code.jquery.com/jquery-1.12.4.min.js"></script> <script> $( document ).ready( function() { var jbOffset = $( '.jbMenu' ).offset(); $( window ).scroll( function() { if ( $( document ).scrollTop() > jbOffset.top ) { $( '.jbMenu' ).addClass( 'jbFixed' ); } else { $( '.jbMenu' ).removeClass( 'jbFixed' ); } }); } ); </script> </head> <body> <div class="jbTitle"> <h1>Site Title</h1> </div> <div class="jbMenu"> <p> First Menu Second Menu Third Menu Fourth Menu </p> </div> <div class="jbContent"> </div> </body> </html>
상단에서는 사이트 제목과 메뉴가 다 보입니다.
스크롤해서 밑으로 내려가면 메뉴가 고정됩니다.
스크립트의 의미를 살펴보겠습니다.
var jbOffset = $( '.jbMenu' ).offset();
메뉴의 위치를 파악합니다.
$( window ).scroll( function() {
스크롤이 발생하면 함수를 실행시킵니다.
if ( $( document ).scrollTop() > jbOffset.top ) {
문서의 스크롤바 위치가 메뉴의 수직 위치보다 아래라면
$( '.jbMenu' ).addClass( 'jbFixed' );
메뉴에 jbFixed 클래스를 추가하여 고정시키고,
else { $( '.jbMenu' ).removeClass( 'jbFixed' ); }
그렇지 않다면 제거합니다.