 |
|
| |
|
  |
8년 전
|
웹페이지의 내용이 많으면 스크롤해서 보게 됩니다. 그러면 페이지에 있는 모든 내용이 움직이고 상단에 있는 메뉴도 위로 사라지게 됩니다.
이렇게 되면 페이지의 내용을 다 보고 다른 메뉴로 이동하려 할 때 다시 문서의 위로 스크롤해서 올라가야 하는 불편이 있습니다.
이 불편을 해소하는 방법 중의 하나가 메뉴의 위치를 고정시키는 것입니다. 간단한 예제는 다음과 같습니다.
http://book.cmsfactory.net/jQuery/V01/Tips/jquery-tip-fixed-header.html
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Fixed Header</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.11.0.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' );
}
그렇지 않다면 제거합니다.
|
|
 추천 : 468 |
추천
목록
|
|
| |
|
