[jQuery 실전] 스크롤 했을 때 상단에 고정되는 헤더

웹사이트를 이용할 때 스크롤을 아래로 내리면 상단에 고정되어 따라오는 헤더들이 있다.

스크롤을 아래로 내렸다가 메뉴를 클릭하기위해 다시 상단으로 올라오는 것이 불편하기 때문에 사용자의 편의성을 위해 자주 사용된다.

이 헤더를 만들기 위해서 알아야하는 값은

사용자가 내린 윈도우 스크롤의 양
화면상단에서 요소(헤더)까지의 거리

두 가지로, 윈도우 스크롤 양과 헤더까지의 거리를 비교하는 조건문을 이용해 윈도우 스크롤 양 >= 상단에서 헤더까지의 거리가 되었을 때, 헤더를 상단에 고정시키는 (position:fixed) 클래스를 추가하고 아닐 때, 클래스를 제거해준다.

(1) 윈도우 스크롤의 양 확인하는 방법

윈도우의 스크롤 양을 파악하는 것은 스크롤바의 수직 위치를 가져오는 .scrollTop() 메서드를 이용해 확인할 수 있다.

⏬ 스크립트 전문

<!DOCTYPE html>
<html>
<head>
  <style>
    p { margin: 10px; padding: 5px; border: 2px solid #666; height :400px }
  </style>
  <script src="js/vendor/jquery-1.10.2.min.js"></script>
</head>
<body>
  
  <p>scrollTop 값을 확인해보자</p>
  <p></p>
  
<script>
	//window를 담은 변수 win을 선언한다.
	var win = $(window);
    
	//마지막 p태그에 "scrollTop: 스크롤양 값"을 텍스트 형식으로 반환한다.
	$("p:last").text( "scrollTop:" + win.scrollTop() );

</script>

</body>
</html>

스크롤 후 새로고침하면 scrollTop 값이 나오는걸 확인할 수 있다.

(2) 화면상단에서 헤더까지의 거리 확인하는 방법

화면상단에서의 거리와 화면 좌측에서의 거리를 .offset() 메서드를 이용해 확인할 수 있는데,

offset().top 은 상단에서의 거리, offset().left는 좌측에서의 거리를 반환한다.

비슷한 메서드로 .position()이 있는데,

.offset()은 무조건 화면을 기준으로 화면 상단 / 좌측에서의 선택한 요소 까지의 거리를 반환하지만

.position()은 가까운 부모중에 포지션이 기본값이 아닌 요소를 기준으로 좌측, 우측에서의 좌표를 반환한다.

⏬ 스크립트 전문

<!DOCTYPE html>
<html>
<head>
  <style>
    * { margin: 0; padding: 0; }
    p { margin-left: 30px; }
  </style>
  
  <script src="./js/vendor/jquery-1.10.2.min.js"></script>
</head>
<body>

  <p>좌측, 상단 값을 확인해보자</p>
  <p>2nd Paragraph</p>
  
<script>
	//마지막 p태그를 담은 변수 p를 선언한다.
	var p = $('p:last');
    
	//p의 offset() 값(화면 상단에서의 거리, 화면 좌측에서의 거리)을 담은 변수 offset을 선언한다.
	var offset = p.offset();
    
	//p태그에 offset.left 값과 offset.top 값을 html 형식으로 표기한다.
	p.html( 'left: ' + offset.left + ', top: ' + offset.top );
</script>

</body>
</html>

화면의 마지막 p태그에 화면 좌측에서 요소까지의 거리, 화면 우측에서 요소까지의 거리가 나온다.

(3) 헤더 만들기

위의 방법들을 활용하여 헤더를 만들어줍니다.

⏬ 스크립트 전문

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
    <style>
      * { margin: 0; padding: 0; }
      body { background: #ddd; margin-top: 200px; }
      .clearfix:after { display: table; clear: both; content: ""; }
      ul { list-style: none; }

      /* style 설정 */
      .main_header { width: 100%; border: 1px solid #ccc; background-color: #fcfcfc; height: 80px; line-height: 80px; }
      .main_header > .inner { width: 100%;     max-width: 1000px; margin: 0 auto;}
      .logo { float: left; }
      .main_nav { float: right; }
      .main_nav li { display: inline-block; padding: 0 1rem; }

      .txt_section {  max-width: 38rem; margin: 0 auto; padding-top: 100px; }
      p { font-size: 15px; }
      
      /* 고정 됐을 때 헤더 */
      .main_header.fixed { position: fixed; top: 0; }
    </style>
  <script src="./js/vendor/jquery-1.10.2.min.js"></script>
  </head>
  <body>

    <header class="main_header">
      <div class="inner clearfix">
        <h1 class="logo"><a href="#"><i class="fa-brands fa-digg"></i></a></h1>
        <nav class="main_nav">
          <ul>
            <li>About</li>
            <li>Like</li>
            <li>News</li>
            <li>Sns</li>
            <li>Contect</li>
          </ul>
        </nav>
      </div>
    </header>

    <section class="txt_section">
      <p>
        오늘은 상단에 고정되어 있는 헤더에대해 알아볼건데요.
      </p>
      <p>
        Lorem ipsum Enim do velit exercitation fugiat cillum labore et dolore ad minim dolor amet tempor nisi sunt Excepteur voluptate laborum et Duis labore cupidatat officia laboris minim cupidatat sit ad incididunt dolor in nulla elit sint do sit aliqua eu ut irure commodo exercitation dolore consequat est laborum Duis in dolore esse est dolore voluptate amet fugiat cupidatat Duis proident consequat nostrud Excepteur ea minim nisi eiusmod sed amet irure id ut officia occaecat nisi elit velit qui aliquip adipisicing consequat adipisicing aute laboris do consectetur sit officia elit in tempor aute eiusmod nulla dolore non sint in fugiat adipisicing amet quis in velit sit sunt Duis culpa deserunt Duis sed elit veniam exercitation Ut pariatur magna et id esse dolor dolore aliquip et in cillum commodo commodo et quis veniam magna irure laborum commodo enim tempor dolore velit ut adipisicing consequat dolore enim sunt eiusmod irure aliquip Duis magna laboris non in aliquip magna dolor dolore nulla nisi proident cupidatat laboris eu commodo adipisicing adipisicing ut aliquip eu aute veniam sint magna mollit nostrud ut sed consectetur et tempor consequat nisi nostrud dolore et officia adipisicing labore id enim nisi reprehenderit sunt fugiat ea Ut dolore sed eu in id velit esse et est labore eiusmod culpa adipisicing quis ea consectetur ea fugiat in culpa magna do laboris.

        Lorem ipsum Proident irure magna dolore quis laboris deserunt ad aliquip non nostrud laborum sed et commodo ut elit cupidatat amet dolore est Ut aute et nulla dolore officia velit Ut ullamco id qui velit cupidatat dolore sed deserunt sed sed sit mollit labore esse laboris cupidatat Duis quis est ea mollit id nostrud Ut nostrud magna veniam cupidatat officia magna consectetur adipisicing sit exercitation est nisi ut fugiat exercitation non in dolor aute laborum anim incididunt commodo ut Duis cupidatat do in aliquip ea amet elit eiusmod ea nulla sed amet labore Duis incididunt do anim dolor culpa non aute cupidatat enim reprehenderit do eu esse commodo et dolor aliquip magna sint Excepteur deserunt dolore laboris magna occaecat non ea in proident voluptate nulla amet officia consequat Ut laboris irure non incididunt Ut eu id aliquip ea minim dolor nostrud ad labore incididunt ut in veniam sunt eiusmod est eiusmod anim sed ea pariatur id tempor commodo sint qui sit do Excepteur ut.
      </p>
      <span></span>
      <span></span>
    </section>

  <script>
    var win = $(window),
        header = $(".main_header"),
        headerOffsetTop = header.offset().top;

    win.scroll (function(){
      if ( $(this).scrollTop() >= headerOffsetTop ) {
        header.addClass("fixed");
      } else {
        header.removeClass("fixed");
      }    
  });
    
  </script>
  </body>
</html>

<script 해석>

window를 담은 변수 wind 선언

헤더의 클래스명 .main_header를 가져오는 변수 header 선언

header의 상단 값을 가져오는 변수 headerOffsetTop 변수 선언

window가 스크롤이 생기면 할 일 :

사용자의 스크롤의 양이 화면상단에서 헤더까지의 거리보다 크거나 같다면 header에 fixed라는 클래스를 추가한다.

아니라면 header에 fixed라는 클래스를 빼준다.

스크롤 내릴 때 상단에서 따라오는 헤더 완성

🚩 오늘 사용한 메소드

.scrollTop() : 세로로 스크롤 된 픽셀 수를 가져온다.

.offset() : 화면을 기준으로 화면 상단 / 좌측에서의 선택한 요소 까지의 거리를 반환

'Programming > jQuery' 카테고리의 다른 글

jQuery 기본 (특징, 선택자, 흐름) (0)	2022.07.15

(1) 윈도우 스크롤의 양 확인하는 방법

(2) 화면상단에서 헤더까지의 거리 확인하는 방법

(3) 헤더 만들기

🚩 오늘 사용한 메소드

'Programming > jQuery' 카테고리의 다른 글

티스토리툴바