스크롤해도 상단에 고정되는 메뉴 만드는 방법
width="1280"
height="720"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioZW63XBIe2Afjjn71Xcl1hMrcSKdr0zc1H2DEFgfclUqrhuT8mkz2TPXOGpzngp3LX4JwbiBYz6K-nNi8dz3X3iAHZrIp8iuHsExRfAjm4qPVCxxFWcB4A7IkBeGAxrfm1aMaRl4eU-Q/s0/sticky-header.png"
/>
상단 고정 메뉴(Sticky Header Menu)
다음은 jQuery를 이용한 상단 고정 메뉴 예제입니다.
<div class="Title">
<h1>Site Title</h1>
</div>
<div class="Menu">
<a href="#">Menu1</a>
<a href="#">Menu2</a>
<a href="#">Menu3</a>
</div>
<div class="Content">
<!--Content-->
</div>body {
margin: 0px;
padding: 0px;
}
.Title {
text-align: center;
}
.Menu {
display: flex;
justify-content: space-evenly;
background-color: rgba(52, 152, 219, 0.75);
width: 100%;
}
.Menu a {
color: #fff;
font-size: 32px;
padding: 20px 15px;
text-decoration: none;
}
.Content {
width: 80%;
margin: 0 auto;
}
.Fixed {
position: fixed;
top: 0px;
}$( document ).ready( function() {
var Offset = $( '.Menu' ).offset();
$( window ).scroll( function() {
if ( $( document ).scrollTop() > Offset.top ) {
$( '.Menu' ).addClass( 'Fixed' );
}
else {
$( '.Menu' ).removeClass( 'Fixed' );
}
});
});data-default-tab="result"
data-editable="true"
data-preview="true"
data-height="750"
data-pen-title="jQuery 스크롤해도 상단에 고정되는 메뉴 만드는 방법 예제"
data-slug-hash="RwRQBjq"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 750px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
스크립트의 의미
스크립트의 의미를 살펴보겠습니다.
var Offset = $( '.Menu' ).offset();메뉴의 위치를 파악합니다.
$( window ).scroll( function() {스크롤이 발생하면 함수를 실행시킵니다.
if ( $( document ).scrollTop() > Offset.top ) {문서의 스크롤바 위치가 메뉴의 수직 위치보다 아래라면
$( '.Menu' ).addClass( 'Fixed' );메뉴에 Fixed 클래스를 추가하여 고정시키고,
else {
$( '.Menu' ).removeClass( 'Fixed' );
}그렇지 않다면 제거합니다.