24. Sticky Nav

프로젝트 소개

• 수동으로 CSS의 position: sticky와 같은 효과 구현하는 내용

배운 것들

• offsetTop
• scrollY

최종 코드

<script>
      const nav = document.querySelector('#main');
      let topOfNav = nav.offsetTop;

      function fixNav() {
        if (window.scrollY >= topOfNav) {
          //fixed로 바뀌는 순간 nav가 공간을 차지하지 않게 되어 덜컹하는 식으로 보이는 현상을 없애기 위함
          document.body.style.paddingTop = nav.offsetHeight + 'px';
          document.body.classList.add('fixed-nav');
        } else {
          document.body.classList.remove('fixed-nav');
          document.body.style.paddingTop = 0;
        }
        // console.log(topOfNav, window.scrollY);
      }

      window.addEventListener('scroll', fixNav);

느낀 점/ 기억할 점

• css position 속성을 fixed로 변경하면, 원래 차지하던 공간을 차지하지 않게되어 공간 변형이 일어나므로 유의