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

스크롤해도 상단에 고정되는 메뉴 만드는 방법 다음은 jQuery를 이용한 상단 고정 메뉴 예제입니다. 스크립트의 의미를 살펴보겠습니다.
1 min read
스크롤해도 상단에 고정되는 메뉴 만드는 방법

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

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

You may like these posts

  • scrollTop() 맨 위로 스크롤 이동하는 방법 jQuery의 scrollTop()을 이용하면 맨 위로 부드럽게 올라가는 효과를 쉽게 만들 수 있습니다. 밑으로 내려가면 웹브라우저 아래 중간에 Top이라는 링크가 생기고,그 링크를 클릭하면 맨 위로 천천히 올라갑니다. …
  • 순서대로 요소를 나타내는 방법 .animate()를 이용하여 서서히 나타나게 만든 예제입니다. <button>Click to animate</button> <div class="box box-1">Hello!<…
  • HTML 태그 바꾸는 방법 예를 들어 <h2>를 <p>로 바꾸고 싶다면 다음과 같이 합니다. $( 'h2' ).contents().unwrap().wrap( '<p></p>' ); <h2> 요소를 선택하고 내용으로 들어간 후 &l…
  • 체크박스 모두 선택, 모두 선택 해제 하는 방법 다음은 체크박스를 모두 선택하고 해제하는 간단한 예제입니다. <p><input type="checkbox" name="all" class="check-all"> <label>Chec…
  • CDN 이용하기 HTML에 다음 코드를 추가합니다. <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>   다운로드 받아 연결하기 jQuery 다운로드는…
  • .length .length는 선택한 요소의 개수를 반환하는 속성입니다. 예를 들어 $( 'div' ).length 는 div 요소의 개수입니다.   예제 버튼을 클릭하면 li 요소의 개수를 출력합니다. <button>Cli…