[javascript] jQuery를 사용하여 스크롤 내비게이션과 위치 추적 기능 구현하기

01 Dec 2023

javascript

이번 블로그에서는 jQuery를 사용하여 스크롤 내비게이션과 위치 추적 기능을 구현하는 방법에 대해 알아보겠습니다. 이러한 기능을 구현하면 사용자가 웹 페이지를 스크롤할 때마다 페이지의 특정 위치를 추적하고 해당 위치에 따라 내비게이션 메뉴를 활성화할 수 있습니다.

스크롤 이벤트 리스너 등록하기

우선 스크롤 이벤트를 처리하기 위해 jQuery에서 제공하는 scroll() 메서드를 사용하여 스크롤 이벤트 리스너를 등록해야 합니다. 이 리스너는 사용자가 스크롤할 때마다 호출되는 함수를 지정할 수 있습니다.

$(window).scroll(function() {
    // 스크롤 이벤트 발생 시 실행할 코드
});

페이지 위치 추적하기

스크롤 이벤트가 발생할 때마다 사용자의 페이지 위치를 추적해야 합니다. 이를 위해 jQuery에서는 scrollTop() 메서드를 사용할 수 있습니다. scrollTop()은 현재 스크롤 위치를 반환하는 메서드입니다.

$(window).scroll(function() {
    var scrollTop = $(window).scrollTop();
    // 현재 스크롤 위치를 사용하여 추가적인 작업 수행
});

내비게이션 메뉴 활성화하기

페이지 위치를 추적하는 것으로는 부족하며, 해당 위치에 따라 내비게이션 메뉴를 적절히 활성화해야 합니다. 이를 위해 페이지의 특정 위치를 기준으로 내비게이션 메뉴에 active 클래스를 추가하거나 제거해야 합니다.

$(window).scroll(function() {
    var scrollTop = $(window).scrollTop();

    // 특정 위치에 따라 내비게이션 메뉴 활성화
    if (scrollTop >= 500 && scrollTop < 1000) {
        $('.nav-menu-item-1').addClass('active');
        $('.nav-menu-item-2').removeClass('active');
        $('.nav-menu-item-3').removeClass('active');
    } else if (scrollTop >= 1000 && scrollTop < 1500) {
        $('.nav-menu-item-1').removeClass('active');
        $('.nav-menu-item-2').addClass('active');
        $('.nav-menu-item-3').removeClass('active');
    } else if (scrollTop >= 1500) {
        $('.nav-menu-item-1').removeClass('active');
        $('.nav-menu-item-2').removeClass('active');
        $('.nav-menu-item-3').addClass('active');
    } else {
        $('.nav-menu-item-1').removeClass('active');
        $('.nav-menu-item-2').removeClass('active');
        $('.nav-menu-item-3').removeClass('active');
    }
});

위의 예시 코드에서는 페이지의 스크롤 위치에 따라 3개의 내비게이션 메뉴 아이템에 active 클래스를 추가하거나 제거하는 방식으로 구현하였습니다. 이 코드를 사용해서 원하는 위치에 따라 내비게이션 메뉴를 활성화할 수 있습니다.

지금까지 jQuery를 사용하여 스크롤 내비게이션과 위치 추적 기능을 구현하는 방법에 대해 알아보았습니다. 이러한 기능은 웹 페이지의 사용자 경험을 향상시키고 다양한 상황에 맞게 내비게이션 메뉴를 조정하는 데 도움이 될 것입니다.

목차

스크롤 이벤트 리스너 등록하기

페이지 위치 추적하기

내비게이션 메뉴 활성화하기

참고 자료