자바스크립트 스크롤에 따라 메뉴 표시하기 (Javascript Scroll Menu Active)

자바스크립트 (JavaScript)

 

See the Pen [JavaScript] 스크롤에 따른 페이지 메뉴 활성화 (Scroll Menu Active) by kimyangsun (@kimyangsun) on CodePen.

 

자바스크립트 스크롤에 따라 메뉴 표시하기 (Javascript Scroll Menu Active) 코드펜 예제입니다.

이 기능을 구현할때 halfHeight 라는 변수 (스크린 높이를 2로 나눠줌) 를 선언하여 화면 높이의 절반을 넘어갈때,

해당하는 메뉴가 활성화 되도록 제작하였습니다. (해당 변수로 아래에서 계산할때 넣어줌)

 

그리고 화면이 리사이즈 될때 높이가 달라질 수 있기에 특정 변수들을 다시 지정해줌으로써 다시 계산되도록 하였습니다.

나머지는 코드를 천천히 보시면 이해가 되실텐데 한가지 특징은 유사배열을 배열로 바꿔주고 배열을 reverse()로 역순으로 바꿔줬다는 점입니다.

 

코드를 보시면 아시겠지만 기존의 섹션들을 배열로 만들어 반복문을 돌려주는데

여기서 스크롤 높이값보다 섹션의 offsetTop 값이 더 크면 그때 메뉴를 활성화 시켜주면서 break로 반복문을 멈춰줍니다.

여기서 역순으로 바꿔주지 않으면 두번째, 세번째 섹션 위치로 스크롤이 지나가도 첫번째 섹션이 먼저 활성화되면서

break로 반복문이 멈춰버려서 계속 첫번째 메뉴만 활성화된 상태로 유지됩니다.

그렇다고 break를 빼버리면 전부 반복문이 돌면서 메뉴가 전부다 활성화 되면서 꼬여버립니다.

 

그렇기 때문에 역방향으로 바꿔주는거고 역방향이면 맨 마지막 섹션의 offsetTop 값부터 비교 계산을 하기 때문에

첫번째 섹션에 스크롤이 위치해있으면 당연히 스크롤 높이값이 첫번째 섹션을 제외한 나머지 섹션의 offsetTop 값보다

작기 때문에 딱 첫번째 섹션 순서에만 메뉴가 활성화 됩니다.

 

글로 설명하려니까 제대로 설명이 된지 모르겠네요 ㅎㅎ..

 

// resize change height - 화면 리사이즈시 높이 변수값 변경
let screenHeight = window.innerHeight;
let halfHeight = screenHeight / 2;
window.addEventListener("resize", () => {
    screenHeight = window.innerHeight;
    halfHeight = screenHeight / 2;
});

// Scroll Down Event - 스크롤 다운 이벤트
const sections = document.querySelectorAll(".section");
const sectionArrReverse = Array.from(sections).reverse();
const header = document.querySelector("#header");
const scrollUpBtn = document.querySelector(".scroll-up-btn");
const scrollDownIcon = document.querySelector(".scroll-down");

document.addEventListener("DOMContentLoaded", () => {
    pageIndicate();
})
document.addEventListener("scroll", () => {
    pageIndicate();
});

// current section indicate - 현재 섹션위치 추적 및 표시
function pageIndicate() {
    let height = (window.scrollY || document.documentElement.scrollTop) + halfHeight;
    let currentNav = document.querySelector(".header__link.active");
    for (let i = 0; i < sectionArrReverse.length; i++) {
        let offsetTop = sectionArrReverse[i].getBoundingClientRect().top + window.pageYOffset;
        if (height > offsetTop) {
            let postNav = document.querySelector(
                `.header__link[data-link="#${sectionArrReverse[i].id}"]`
            );

            if (!postNav) {
                currentNav?.classList.remove("active");
                return;
            }

            currentNav?.classList.remove("active");
            postNav.classList.add("active");
            break;
        }

        if (height < sectionArrReverse[sectionArrReverse.length - 1].getBoundingClientRect().top + window.pageYOffset) {
            if (currentNav) currentNav.classList.remove('active');
        }
    }
}

// Scroll To Event (click) - 링크 클릭시 해당 위치로 스크롤이동 이벤트
const headerNav = document.querySelector(".header__nav");

headerNav.addEventListener("click", event => {
    event.preventDefault();
    const target = event.target.closest('.header__link');
    if (!target) return;
    console.log(target);
    const link = target.dataset.link;
    scrollIntoView(link);
});

function scrollIntoView(selector) {
    const scrollInto = document.querySelector(selector);
    console.log(scrollInto);
    scrollInto.scrollIntoView({ behavior: "smooth" });
}