jquery 스크롤 움직임에 따라 헤더 움직이기

 
  // Hide Header on on scroll down
  let didScroll;
  let lastScrollTop = 0;
  let delta = 5; // 동작의 구현이 시작되는 위치
  let navbarHeight = $header.outerHeight(); // 영향을 받을 요소를 선택


  // 스크롤시 헤더 변경
  $(window).scroll(function () {
    let $st = $(window).scrollTop(); //스크롤 위치
    let $subTitleHeight = $('.subTitle').outerHeight();

    didScroll = true;


    if ($st >= $subTitleHeight) {
      $breadcrumbs.addClass('scroll');
    } else if ($st < $subTitleHeight) {
      $breadcrumbs.removeClass('scroll');
    } else if ($st >= 90) {
      $header.addClass('scroll');
    } else {
      console.log($subTitleHeight)
      // $header.removeClass('scroll');
      if ($thisLocation.match('index.php')) {
        //index파일에서 적용시킬 것
        $header.removeClass('scroll');
      } else {
        $header.addClass('scroll');
      };
    };

  });

  

  // hasScrolled()를 실행하고 didScroll 상태를 재설정
  setInterval(function () {
    if (didScroll) {
      hasScrolled();
      didScroll = false;
    }
  }, 250);

  // 동작을 구현
  function hasScrolled() {
    // 접근하기 쉽게 현재 스크롤의 위치를 저장한다.
    let st = $(this).scrollTop();

    // 설정한 delta 값보다 더 스크롤되었는지를 확인한다.
    if (Math.abs(lastScrollTop - st) <= delta) {
      return;
    }

    // 헤더의 높이보다 더 스크롤되었는지 확인하고 스크롤의 방향이 위인지 아래인지를 확인한다.
    if (st > lastScrollTop && st > navbarHeight) {
      // Scroll Down
      $header.addClass('nav-up');
      if ($(window).width() <= 1024) {
        $bCate.css({ 'top': 56 });
      } else {
        $bCate.css({ 'top': 59 });
      }
    } else {
      // Scroll Up
      if (st + $(window).height() < $(document).height()) {
        $header.removeClass('nav-up');
      }
      
      if (st + $(window).height() < $(document).height()) {
        $header.removeClass('nav-up');
        if ($(window).width() <= 1024) {
          $bCate.css({ 'top': 76 });
        } else {
          $bCate.css({ 'top': 76 });
        }
      }
    }

    // lastScrollTop 에 현재 스크롤위치를 지정한다.
    lastScrollTop = st;
  }

 

 

 

출처: https://codepen.io/qwer273/pen/bGNOJBY

fixed header on Scroll