js challenge day 24

sticky Nav

Code

  <script>
    const nav = document.querySelector('#main');
    let topOfNav = nav.offsetTop;
    const fixNav = () => {
      if (window.scrollY >= topOfNav) {
        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;
      }
    }
    window.addEventListener('scroll', fixNav);
  </script>

배운 점 &  느낀 점

sticky예제를 구현하는 과제였습니다.

sticky가 fixed랑 유사한점이 많은데, 역시 sticky는 fixed로 구현할 수 있었습니다.

nav의 offsetTop을 저장한 다음, 스크롤을 내릴때마다 fixNav함수를 호출하여 scrollY가 topOfNav보다 커질때 nav를 fixed하는 방식을 사용했습니다.