position: sticky 왜 안먹는거죠

position의 sticky 속성은 스크롤과 연동하여 특정 요소를 화면에 고정시킨다.

1. sticky속성을 갖는 요소는 상위 부모요소 안에서만 적용된다는 점
2. 부모요소에 충분한 height값을 줘야 한다는 점
3. sticky요소의 전체 부모요소 중에 overflow: auto, overflow: hidden, overflow: scroll 가 있으면 적용이 되지 않는다.

    // gnb 스크롤 이벤트
    var fixScroll = 0;
    $(window).scroll(function(event){
         var scroll = $(this).scrollTop();
         if (scroll > 2000){
              $("#gnb").addClass("fixed");
              $("html").css("overflow-x", "visible");
         } else {
              $("#gnb").removeClass("fixed");
              $("html").css("overflow-x", "hidden");
         }
         fixScroll = scroll;
    });
});

로컬에서 혼자 작업하며 잘 되던 sticky가
프로젝트 개발서버에 업로드 이후부터 적용이 안되는 것이었다.

이유는 해당 프로젝트 폴더에 공통으로 쓰이는 css파일의 html 태그에 overflow가 적용되어 있어서였다.
공통파일이라 삭제할 수는 없었고.. 스크립트로 sticky속성이 적용되는 시점에 html의 overflow 속성값을 visible로 잠시 바꿔주었더니 해결되었다.

css를 수도 없이 작성하면서 몰랐던 사실.. 반성해..