scrollTop

첫번째 방법

코드 분석

document.addEventListener('scroll', function() {
  	// 크로스브라우징을 위한 스크롤값 
    const top = window.scrollY || window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    (top >= 50 )
        ? nav.classList.add('active')
        : nav.classList.remove('active');
})

두번째 방법

코드 분석

// firefox인지 검사
const isFireFox = (navigator.userAgent.indexOf('Firefox') !== -1);
// firefox 브라우저의 경우 event.wheelDelta 값을 지원하지 않는다.
const wheelEvt = isFireFox ? 'DOMMouseScroll' : 'wheel';

window.addEventListener(wheelEvt, mouseWheelEvent);

function mouseWheelEvent(e) {
  	// e.wheelDelta나 -e.detail 값이 음수면 아래로 스크롤이 움직인것이고
  	// 양수이면 위로 스크롤이 움직인것이다 
    const delta = e.wheelDelta ? e.wheelDelta : -e.detail;
    (delta < 0)
        ? nav.classList.add('active')
        : nav.classList.remove('active');
}