전에 만들던 프로젝트의 사이트 헤더를 아래로 스크롤 할 경우엔 사라지게 하면서, 위로 스크롤 할 때 다시 나타나도록 만들어뒀었는데..... wheel event를 기본으로 해두는 바람에 아이패드 사이즈에선 적용이 안된다는 걸 이제야 알았다🥲 분명 처음 만들 때 scroll event랑 wheel event가 다름을 인지하고 만들었을텐데 마무리가 부실했다
그래서 지금이라도 고쳐보려고! 일단 wheel을 scroll로 바꾸고 좌표를 구하는 것만 바꿨는데.. 될 줄 알았는데 안 되더라,,(;′⌒`)
// header fixed scroll
window.addEventListener('wheel', e => {
const headerTopWrap = document.querySelector('#header_top_wrap');
const headerTop = document.querySelector('#header_top');
let headerScroll = window.scrollY;
let headerWheel = e.deltaY > 0;
if (headerScroll > 700) {
headerTopWrap.style.backgroundColor = '#f6f6f6';
} else {
headerTopWrap.style.backgroundColor = '#f6f6f600';
};
if (headerWheel) {
headerTopWrap.style.top = '-12vh';
headerTop.style.top = '-12vh';
} else {
headerTopWrap.style.top = '0';
headerTop.style.top = '0';
};
});
일단 원래 코드는 이런 상태였는데