jquery url 은 적절히 알아서들...
상단 고정 메뉴
웹페이지의 내용이 많으면 아래로 스크롤해서 보게 됩니다.
그러면 페이지에 있는 모든 내용이 움직이고 상단에 있는 메뉴도 위로 사라지게 됩니다.
이렇게 되면 페이지의 내용을 다 보고 다른 메뉴로 이동하려 할 때 다시 문서의 위로 스크롤해서 올라가야 하는 불편이 있습니다.
모바일 기기에서라면 더욱 불편합니다. 이 불편을 해소하는 방법 중의 하나가 메뉴를 고정시키는 것입니다.
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="http://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' );
}
그렇지 않다면 제거합니다.
살인!
javascript/jquery
