스크롤해도 상단에 고정되는 메뉴 만들기
페이지 정보
작성자 서방님 댓글 0건 조회 191회 작성일 17-04-17 15:24본문
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Fixed Header</title>
<style>
body {
margin: 0px;
padding: 0px;
}
.Title {
text-align: center;
}
.Menu {
text-align: center;
background-color: yellow;
padding: 10px 0px;
width: 100%;
}
.Content {
height: 2000px;
}
.Fixed {
position: fixed;
top: 0px;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$( document ).ready( function() {
var Offset = $( '.Menu' ).offset();
$( window ).scroll( function() {
if ( $( document ).scrollTop() > Offset.top ) {
$( '.Menu' ).addClass( 'Fixed' );
}
else {
$( '.Menu' ).removeClass( 'Fixed' );
}
});
} );
</script>
</head>
<body>
<div class="Title">
<h1>Site Title</h1>
</div>
<div class="Menu">
<p>
First Menu
Second Menu
Third Menu
Fourth Menu
</p>
</div>
<div class="Content">
</div>
</body>
</html>
댓글목록
등록된 댓글이 없습니다.
