웹사이트를 서핑하다 보면 스크롤을 아래로 내릴 때 사이드바 메뉴나 상단 헤더가 화면을 따라 부드럽게 움직이는 레이아웃을 자주 접하게 됩니다.
이러한 요소를 고정형 메뉴 또는 스티키 배너/메뉴(Sticky Menu)라고 부르는데요. CSS의 position: sticky 속성만으로는 세밀한 위치 계산이나 상하 스크롤 방향 인식(Up/Down), 특정 배너 영역과의 간격 조율을 완벽하게 처리하기 어렵습니다.
이번 포스팅에서는 jQuery를 활용하여 사용자의 현재 스크롤 위치값과 헤더/배너 높이를 실시간으로 계산해 부드럽게 따라붙는 스크롤 메뉴 스크립트를 구현하는 방법을 알아보겠습니다. 아래 가이드 내용을 마우스로 드래그하여 깔끔한 텍스트 반전 효과를 직접 확인해 보세요!
-
st : 현재 브라우저창의 실시간 스크롤 상단 위치값 (px)-
ht : 상단 헤더 영역의 기본 높이 또는 탑 위치값 (px)-
wt : 상단 배너 영역까지 모두 감안하여 계산된 실제 메뉴의 상단 마진 경계값 (px)
1. 스크롤 추적 및 메뉴 오프셋 제어 소스코드
사용자가 마우스 휠을 내리거나 올릴 때 반응하는 jQuery 이벤트 핸들러 구조입니다. 조건문을 통해 스크롤이 특정 높이(ht)를 넘어가는 순간 메뉴의 최상단 좌표값(offset)을 실시간으로 다시 계산하여 부드럽게 이동시킵니다.
// 실시간 스크롤 트래킹 및 메뉴 추적 스크립트
var lastScrollTop = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop(), // 현재 스크롤 탑 위치값(px)
ht = 200, // 헤더 탑 기준 위치값(px)
wt = 400, // 배너 크기까지 고려한 메뉴 기본 탑 탑값(px)
ct = 0; // 계산된 실시간 오프셋 임시 변수
// [체크] 스크롤 방향 감지 (올림/내림 활용 가능)
if (st > lastScrollTop){
// alert("downscroll code");
} else {
// alert("upscroll code");
}
lastScrollTop = st;
// 움직일 대상 타겟 요소(#snb_wrap_test)가 화면에 존재하는지 체크
if ($("#snb_wrap_test").length){
if (lastScrollTop > ht){
// 헤더 영역을 벗어났을 때 배너 한계점 계산 후 부드러운 좌표 동적 할당
ct = st + ht > wt ? (st + ht) - 20 : ht + 20;
$("#snb_wrap_test").offset({top:ct});
} else {
// 기본 최상단 위치에 있을 때 메뉴 기본 정위치 유지
$("#snb_wrap_test").offset({top:wt - 20});
}
}
});2. 코드 작동 메커니즘 톺아보기
위 스크립트는 단순히 스크롤을 따라다니는 것을 넘어 삼항 연산자(? :)를 통해 st + ht > wt 조건을 검사합니다. 이를 통해 웹페이지 맨 위쪽의 배너 영역과 메뉴 영역이 서로 부딪혀 겹치거나 가려지는 현상을 방지해 줍니다.
좌표 제어 시 - 20 이나 + 20과 같은 마진 오프셋을 부여하면 화면 가장자리에 메뉴가 너무 꽉 끼지 않고 시각적으로 여유 있는 레이아웃을 유지할 수 있습니다.
3. 공식 리소스 및 라이브러리 연동 안내
해당 스크롤 이벤트를 정상적으로 구동하기 위해서는 기본 jQuery 코어 라이브러리가 반드시 로드되어 있어야 합니다. 아래 버튼을 클릭하여 공식 저장소에서 다양한 스크롤 플러그인 리소스 정보를 직접 확인해 보세요.
4. 맺음말
사용자가 스크롤을 길게 내려야 하는 롱폼 페이지나 쇼핑몰 장바구니 영역, 블로그 사이드바 카테고리에 이 jQuery 스크롤 추적 스크립트를 적용하면 가독성과 유저 경험(UX)을 크게 올릴 수 있습니다. 사이트 구조에 맞게 변수값들을 조율하여 유연하게 활용해 보세요!