Scrollspy 스크롤 스파이란? 스크롤스파이 메뉴 예제

 

Scrollspy란?

탐색 메뉴가 페이지를 스크롤할 때 사용자가 보고 있는 페이지의 현재 섹션을 강조 표시할 수 있는 웹 개발 기능을 말한다.

 

 

jQuery 예시

스크롤 하면 현재 페이지 섹션에 해당하는 메뉴 색상이 변경 된다.

 

 

 

 

$(document).ready(function() {
  $(window).scroll(function() {
    var currentSection = null;
    $('section').each(function() {
      var sectionTop = $(this).offset().top - 50;
      if ($(window).scrollTop() >= sectionTop) {
        currentSection = $(this).attr('id');
      }
    });
    $('nav li').removeClass('active');
    if (currentSection) {
      $('nav li:has(a[href="#'+ currentSection +'"])').addClass('active');
    }
  });
});

 

문서를 스크롤 하면 현재 섹션을 담을 변수를 생성하고

each 메서드를 사용하여 각 section 영역의 top 위치를 확인한다.

이 때 사용한 offset() 함수는 선택한 요소의 문서 상단으로부터의 거리를 반환하는데, 이 값을 통해 스크롤이 어느 섹션에 위치 하는지를 판단 할 수 있고 스크롤 위치와 현재 섹션의 위치가 정확하게 맞지 않을 경우를 대비해 조금 아래에 있을 경우에도 해당 섹션을 인식할 수 있도록 -50

만약 윈도우 스크롤top이 섹션의 위치를 넘어 설 경우 해당 섹션의 id 값을 가져온다.

nav li에 active 클래스를 먼저 지우고

만약에 currentSection에 값이 있다면 href 속성 값이 해당 할 경우 active클래스를 붙인다.

 

javaScript 예시

window.addEventListener('scroll', () => {
  const sections = document.querySelectorAll('section');
  const navLinks = document.querySelectorAll('nav ul li a');
  let current = '';
  
  sections.forEach((section) => {
    const sectionTop = section.offsetTop;
    const sectionHeight = section.clientHeight;
    if (pageYOffset >= sectionTop - sectionHeight / 3) {
      current = section.getAttribute('id');
    }
  });
  
  navLinks.forEach((navLink) => {
    navLink.classList.remove('active');
    if (navLink.getAttribute('href').includes(current)) {
      navLink.classList.add('active');
    }
  });
});