국비 67일차

  <header id="hd"></header>
  <section class="wrap"></section>
  <div id="startAni">

<style>
    #hd {
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      height: 80px;
      background-color: black;
      z-index: 1000;
      transition: 0.5s;
    }

    #hd.up {
      transform: translateY(-100%);
    }

    .wrap {
      height: 5000px;
    }

    #startAni {
      height: calc(100vh + 50px);
      transition: 0.5s;
    }

    #startAni.color {
      background-color: rgb(81, 127, 255);
    }
  </style>

<script>
    $(document).ready(function () {

      var didScroll; //스크롤 여부 => Boolean
      var lastScrollTop = 0; // 스크롤 방향(위/아래) 감지
      var delta = 5; // 5단위로...
      var navbarHeight = $('#hd').outerHeight();

      $(window).on('scroll', function (event) {
        didScroll = true;
        if ($(this).scrollTop() > $('#startAni').offset().top) {
          $('#startAni').addClass('color');
        }
      });

      // $(window).scroll(function (event) {
      //   didScroll = true;
      // });

      setInterval(function () {
        if (didScroll) {
          hasScrolled();
          didScroll = false;
        }
      }, 250);

      function hasScrolled() {
        var st = $(this).scrollTop(); // setInterval에 hasScrolled가 있으므로 즉 didScroll이 true가 되는 scroll이벤트 window의 스크롤 위치 감지
        if (Math.abs(lastScrollTop - st) <= delta) return;
        // 스크롤 강도가 5 이하일 때에는 안 한다(return) => 스크롤 할까말까 or 안 하고 있을 때

        if (st > lastScrollTop && st > navbarHeight) {
          // 스크롤 위치값과 이전의 위치값 비교
          // Scroll Down
          $('#hd').addClass('up');
        }
        else {
          // Scroll Up  
          $('#hd').removeClass('up');
        }
        lastScrollTop = st;
        // 현 스크롤 위치값을 이전 값으로 똑같이 만들어서 위/아래 구분 가능하도록 함
      }
    })
  </script>