nugawiki

./categories/front-end

자바스크립트 헤더 스크롤 감지하여 숨기기

업데이트 2026-07-21 조회수

스크롤 방향 감지해서 헤더 숨기기/보이기 (jQuery)

$(function () {
  var lastScrollTop = 0, delta = 15;
  $(window).scroll(function () {
    var st = $(this).scrollTop();
    if (Math.abs(lastScrollTop - st) <= delta) return;   // 미세한 스크롤은 무시
    if (st > lastScrollTop && lastScrollTop > 0) {
      $(".header").css("top", "-50px");   // 아래로 스크롤 → 숨김
    } else {
      $(".header").css("top", "0px");     // 위로 스크롤 → 노출
    }
    lastScrollTop = st;
  });
});

./comments