[jQuery] 스크롤 이벤트를 통해 메뉴 따라오게 하기 (menu header fix on scroll event)

jQuery 스크롤 이벤트를 통해 메뉴 따라오게 하기 (menu header fix on scroll event)

최근들어 스마트폰의 등장과 함께 반응형 웹이 인기다. 

작은 화면의 기기에 PC에서 보여주던 내용들을 전부 담아서 보여주려고하니 여간 까다로운게 아니다.

이번에는 쇼핑몰에서 보이는 UI인데 유명한 쇼핑몰들의 UI를 살펴보면 거의다 비슷비슷 하다.

그중 내가 구현 하고 싶었던 UI는 상세페이지에서 어떤 메뉴가 있을 때 스크롤 시 그 메뉴가 화면 상단에 따라오는 UI이다.

소스 (Source)

$(window).scroll(function() {
        let wrap_el = $('#ebric_mobile_wrap');    // 전체 wrap 요소
        let tab_top = $('.info-type-select').offset().top - $('#header_wrap').outerHeight(true);    // tab 요소의 위치
        let detail_top = $('.detail-info-wrap').offset().top - $('#header_wrap').outerHeight(true);    // detail wrap 요소의 위치
        
        // 현재 스크롤이 tab요소의 위치와 같거나 아래에 있을 때 scrolled-product-detail-page 클래스 추가하여 tab menu 고정
        if ($(this).scrollTop() >= tab_top && !wrap_el.hasClass('scrolled')) {
            wrap_el.addClass('scrolled');
        }
        // 현재 스크롤이 detail wrap 요소보다 위에 있을 경우 scrolled-product-detail-page 클래스 제거하여 tab menu 고정 해제
        else if ($(this).scrollTop() < detail_top) {
            wrap_el.removeClass('scrolled');
        }
});

위의 소스는 css를 통해서 스크롤 이벤트에서 메뉴를 상단에 고정 시킬 때 클래스를 추가하여 고정시키는 방법이다. 이것 말고도 여러가지 방법이 있겠지만 일단 조건식을 잊지 않기 위해서 정리부터 빠르게 했다.