[Javascript] Scroll Spy (스크롤 스파이) 적용하기

 

예전에 작업을 하면서 스크롤 스파이는 플러그인을 사용했었는데

그때 생각했던게 나중에는 직접 구현을 해봐야지! 라고 생각했어서

이번에는 직접 구현을 해보았다😎

 

---

 

Javascript 코드

 

// 윈도우 스크롤 이벤트 (스크롤을 했을 때 발생)
window.addEventListener("scroll", () => {
  // 1. 섹션들을 querySelectorAll을 통해 변수에 담는다.
  const sections = document.querySelectorAll("section");
  // 2. Gnb 메뉴들을 querySelectorAll을 통해 변수에 담는다.
  const gnbItems = document.querySelectorAll(".gnb__item");

  // 3. forEach 문을 통해 섹션들을 한번씩 순회한다.
  // 이때 index도 같이 가져온다.
  sections.forEach((section, index) => {
    const top = window.scrollY; //현재 Y값
    const sectionTop = section.offsetTop - 40; // 섹션 상단의 Y값 - Gnb메뉴 높이 값
    const sectionHeight = section.offsetHeight; // 섹션 높이

    // 4. forEach 문을 통해 Gnb 메뉴들을 한번씩 순회한다.
    gnbItems.forEach((gnbItem) => {
      // 5. 스크롤 위치가 섹션 상단 스크롤 위치보다 크고 && 섹션높이값보다 작을 경우
      if (top >= sectionTop && top < sectionTop + sectionHeight) {
      	// 6. Gnb 메뉴들의 active 클래스를 전부 지운다.
        gnbItem.classList.remove("active");
        // 7. 해당 index에 해당하는 Gnb 메뉴의 클래스에만 active 클래스명을 추가한다.
        gnbItems[index].classList.add("active");
      }
    });
  });
});

 

 

결과물

 

See the Pen Untitled by Happy Hee (@8happyhee) on CodePen.

 

 

혹시나 더 좋은 코드가 있다면 추후 수정해야지.

 

- 끝 -