스크롤해도 상단에 고정되는 메뉴 만드는 방법

상단 고정 메뉴(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' );
    }
  });
});

 

스크립트의 의미

스크립트의 의미를 살펴보겠습니다.

var Offset = $( '.Menu' ).offset();

메뉴의 위치를 파악합니다.

$( window ).scroll( function() {

스크롤이 발생하면 함수를 실행시킵니다.

if ( $( document ).scrollTop() > Offset.top ) {

문서의 스크롤바 위치가 메뉴의 수직 위치보다 아래라면

$( '.Menu' ).addClass( 'Fixed' );

메뉴에 Fixed 클래스를 추가하여 고정시키고,

else {
  $( '.Menu' ).removeClass( 'Fixed' );
}

그렇지 않다면 제거합니다.