[JQuery] 스크롤 네비게이션, 스크롤스파이(scollspy) 구현하기

스크롤 네비게이션, 스크롤스파이(scollspy) 구현하기

스크롤스파이(scollspy)는 스크롤이 긴 페이지에서 유저가 쉽게 컨텐츠를 찾을 수 있도록 도와주는 기능을 한다.

부트스트랩을 사용해도 쉽게 구현할 수 있지만 기능만을 위해서 무거운 부트스트랩을 쓸 이유가 없기 때문에 예전에 구현해 놓은 JQuery 소스코드를 정리해보려 한다.

스크롤스파이

 

🎈 HTML

<ul> 태그로 navigation, <section> 태그로  이동할 section 마크업 해주기

<ul class="section_nav__list">
  <li class="section_nav__item">
    <button class="section_nav__button active">1</button>
  </li>
  <li class="section_nav__item">
    <button class="section_nav__button">2</button>
  </li>
  <li class="section_nav__item">
    <button class="section_nav__button">3</button>
  </li>
  <li class="section_nav__item">
    <button class="section_nav__button">4</button>
  </li>
  <li class="section_nav__item">
    <button class="section_nav__button">5</button>
  </li>
  <li class="section_nav__item">
    <button class="section_nav__button">6</button>
  </li>
</ul>

<main class="main">
  <section class="section_nav one">1</section>
  <section class="section_nav two">2</section>
  <section class="section_nav three">3</section>
  <section class="section_nav four">4</section>
  <section class="section_nav five">5</section>
  <section class="section_nav six">6</section>
</main>

 

🎈 SCSS / CSS

필요한 디자인을 자유롭게 변경할 수 있게 있게 최소한의 스타일만 적용해 줬다.

<section>은 색깔로 구분해 줬다.

SCSS / CSS 나눠놨지만 동일한 스타일이고 필요한 포맷에 맞춰 가져다 쓰면 된다.

/* SCSS */
.section_nav {
  height: 100vh;
  &.one{ background: palegoldenrod}
  &.two{ background: palegreen}
  &.three { background: peachpuff}
  &.four { background: powderblue}
  &.five { background: pink}
  &.six { background: skyblue}
  
  &__list {
    position: fixed;
    left: 100px;
    top: 50%;
    transform: translateY(-50%);
  }
  &__item {}
  &__button {
    display: block;
    border: 1px solid #ddd;
    background: #fff;
    width: 50px;
    height: 50px;
    cursor: pointer;
    transition: all 0.3s;
    &.active {
      background: #999!important;
    }
    &:hover {
      background: #eee;
    }
  }
}

/* CSS */
.section_nav {
  height: 100vh;
}
.section_nav.one {
  background: palegoldenrod;
}
.section_nav.two {
  background: palegreen;
}
.section_nav.three {
  background: peachpuff;
}
.section_nav.four {
  background: powderblue;
}
.section_nav.five {
  background: pink;
}
.section_nav.six {
  background: skyblue;
}
.section_nav__list {
  position: fixed;
  left: 100px;
  top: 50%;
  transform: translateY(-50%);
}
.section_nav__button {
  display: block;
  border: 1px solid #ddd;
  background: #fff;
  width: 50px;
  height: 50px;
  cursor: pointer;
  transition: all 0.3s;
}
.section_nav__button.active {
  background: #999 !important;
}
.section_nav__button:hover {
  background: #eee;
}

 

🎈 Script

scroll과 click 두 개의 이벤트가 작동한다

scroll 할 때 해당섹션에 맞게 navigation이 활성화되는 작업과

navigation을 click 했을 때 navigation 활성화와 함께 스크롤이 이동하는 작업이 이루어져야 한다.

$(function() {
  
  const $navButton = $('.section_nav__button');
  
  // 스크롤시 네비 활성화
  $(window).on('scroll', function() {
    
    const windowPosition = $(window).scrollTop();
    const navItemLength = $('.section_nav__item').length
    
    //  스크롤 해당 section에 맞는 nav 활성화
    for ( let i = 0; i < navItemLength; i++) {
      
      if(windowPosition > $('.section_nav').eq(i).offset().top-2) {
        $navButton.removeClass('active');
        $('.section_nav__item').eq(i).children(".section_nav__button").addClass("active");
      }
      
    }
  })
  // 네비 클릭이벤트
  $navButton.on('click', function() {
    
    const navIdx = $(this).parent('li').index();
    const sectionTop = $(".section_nav").eq(navIdx).offset().top;
    
    // 버튼 클릭하면 nav active 시키기
    $navButton.removeClass('active');
    $(this).addClass('active');
    
    // 버튼 클릭하면 해당영역으로 scroll 이동시키기
    // 1. 애니메이션 없이 이동 
    // $("html, body").scrollTop(sectionTop);
    // 2. 애니메이션 이동 
    $("html, body").stop().animate({scrollTop : sectionTop},300);
    
  })
})

 

 

See the Pen Untitled by 방미나 (@uyjljkqd) on CodePen.