반응형
웹페이지의 내용이 많으면 스크롤해서 보게 됩니다. 그러면 페이지에 있는 모든 내용이 움직이고 상단에 있는 메뉴도 위로 사라지게 됩니다.
이렇게 되면 페이지의 내용을 다 보고 다른 메뉴로 이동하려 할 때 다시 문서의 위로 스크롤해서 올라가야 하는 불편이 있습니다.
이 불편을 해소하는 방법 중의 하나가 메뉴의 위치를 고정시키는 것입니다. 간단한 예제는 다음과 같습니다.
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' );
}
그렇지 않다면 제거합니다.
반응형
'유용한정보' 카테고리의 다른 글
| HTML5 오디오 404 오류시 다른 파일 재생 (0) | 2015.07.29 |
|---|---|
| HTML5 Audio Element, 한 판 붙자! (0) | 2015.07.29 |
| 스마트폰 음악방송 앱 다운로드 및 설치 방법 (0) | 2015.07.04 |
| 유튜브 영상 첨부할 때 사용 가능한 옵션 총정리 (0) | 2015.07.02 |
| Windows 8을 저사양PC에 최적화하기! (0) | 2015.04.05 |
| HTML 5 video 코드 사용 및 jQuery로 동영상 동적 load (0) | 2015.02.21 |
| [HTML5] Video & Audio (0) | 2015.02.21 |
| JavaScript 최적화 (CompressorRater) (0) | 2015.02.20 |
댓글