자바스크립트 스크롤 반응,

박범준·2021년 8월 4일
0
fixedNav = document.querySelector('nav');

window.addEventListener('scroll')
window.onscroll =function(){}
document.addEventListener('scroll')

window.addEventListener('scroll', function(){

	var top = window.scrollY //대부분사용
    || window.pageYOffset //익스9이상
    || document.bady.scrollTop;// 크롬불가
    || document.body.scrollTop; //사파리사용가능
    
    (top>50)
    ?	fixedNav.classList.add('active')
    :	fixedNav.classList.add('active')
)
------

var oldVal = 0; //기준점

window.addEventListener('scroll',function(){
var newVal = window.scrollY //대부분사용
    || window.pageYOffset //익스9이상
    || document.bady.scrollTop;// 크롬불가
    || document.body.scrollTop; //사파리사용가능
    
    if(oldVal - newVal <0){
       fixedNav.classList.add('active');
    
    }
 	if(oldVal - newVal >0){
    	oldVal = newVal;
    }
    })
    ---------------
window.addEventListener('wheel',function(e){
	var index. e.wheelDelta ? e.wheelDelta : -e.detail;
    (index<0)
    ? fixed.classList.add('active')
    : fixed.classList.remove('active')
}) //파이어폭스x

window.addEventListener('DOMMouseScroll',function(e){
	var index. e.wheelDelta ? e.wheelDelta : -e.detail;
    (index<0)
    ? fixed.classList.add('active')
    : fixed.classList.remove('active')
}) //파이어폭스o

-> 정리
window.addEventListener('wheel',mouseWheelEVt);
window.addEventListener('DOMMouseScroll',mouseWheelEVt);
function mouseWheelEVt(e){
	var index. e.wheelDelta ? e.wheelDelta : -e.detail;
    (index<0)
    ? fixed.classList.add('active')
    : fixed.classList.remove('active')
})

log(navigator.userAgent.indexof('firefox' !== -1);

var isFirefox = (navigator.userAgent.indexof('firefox' !== -1);
var wheelEvt = isFirefox ? 'DOMMouseScroll' : 'wheel';
window.addEventListener('DOMMouseScroll',mouseWheelEVt);
function mouseWheelEVt(e){
	var index. e.wheelDelta ? e.wheelDelta : -e.detail;
    (index<0)
    ? fixed.classList.add('active')
    : fixed.classList.remove('active')
})




profile
HTML/CSS/JAVASCRIPT

0개의 댓글