[JavaScript30] Day 24

Sticky Nav

 

 

const nav = document.querySelector('#main');
const topOfNav = nav.offsetTop;

function fixNav() {
  console.log(topOfNav);
}

window.addEventListener('scroll', fixNav);

스크롤을 해보면 계속 같은 숫자만 찍히는데

이 숫자가 nav의 현재 위치값이다

 

스크롤을해서 지나간 만큼은 window.scrollY로 알수있다.

const nav = document.querySelector('#main');
const topOfNav = nav.offsetTop;

function fixNav() {
  if (window.scrollY >= topOfNav) {
    document.body.classList.add('fixed-nav');
  } else {
    document.body.classList.remove('fixed-nax');
  }
}

window.addEventListener('scroll', fixNav);

이렇게 붙은 ClassName에 css를 추가하여 고정되도록 합니다. (position: fixed)

 

마지막으노 body에 패딩을 넣어 스크롤될 때 nav에 가리는 내용이 없도록 코드를 추가해 줍니다.

최종코드

const nav = document.querySelector('#main');
const topOfNav = nav.offsetTop;

function fixNav() {
  if (window.scrollY >= topOfNav) {
    document.body.style.paddingTop = nav.offsetHeight + 'px';
    document.body.classList.add('fixed-nav');
  } else {
    document.body.style.paddingTop = 0;
    document.body.classList.remove('fixed-nav');
  }
}

window.addEventListener('scroll', fixNav);

 

 

JavaScript30 강의를 보고 공부한 글입니다. (https://javascript30.com/)