[자바스크립트]상단 고정된 sticky 메뉴 응용

(function() {
  'use strict';

  var contents = document.querySelector(".contents");
  var h = document.querySelector("header");
  var H_height ;

  function seTopPadding(){
   H_height = h.offsetHeight;
   contents.style.paddingTop = H_height + "px";

  }

  function onScroll(){
    window.addEventListener("scroll", callbackFnc);
    function callbackFnc(){
      var y = window.pageYOffset;
      if(y > 500){
        h.classList.add("scroll");
      } else {
        h.classList.remove("scroll");
      }
    }
  }

  window.onload = function(){
    onScroll();
    seTopPadding();
  };

})();

 

원래 소스, 참고 한곳 : https://webdesign.tutsplus.com/ko/tutorials/how-to-create-a-fixed-header-which-animates-on-page-scroll--cms-26672

See the Pen sticky top menu by daeyun (@daeyun) on CodePen.