스크롤 위치, 방향 감지

스크롤 위치 감지로 이벤트 발생시키기

scroll 이벤트 선택자 이후,
let 좌표값저장어레이 = [];
foreach로, 좌표값 push 시키고
window.pageYOffset >= 좌표값저장어레이.y - window.innerHeight/2

EX)

let secYP = [];
        let num2 = 0;
        elSection.forEach(function(elSectionV, elSectionK) {
            secYP.push(elSectionV.getBoundingClientRect());
            console.log(secYP);
    
            secYP.forEach(function(secYPV, secYPK) {
                if(window.pageYOffset >= secYPV.y - window.innerHeight/2) {
                    elSection[secYPK].classList.add("active");
                    elMenus[secYPK].classList.add("active");
                    elMenus[num2].classList.remove("active");
                } else {
                    elSection[secYPK].classList.remove("active");
                }
                num2 = secYPK;
            })
        })
    });

위 코드대로 그 어레이를 foreach 시켜 다시금 각 콘텐츠[k]에 스크롤 이벤트에 넣어 클래스 네임 추가로 이벤트 발생시킴

스크롤 방향 감지 코딩

let pos = {y:0, x:0, status:true};
window.addEventListener("scroll", function() {
pos.y = window.pageYOffset;

// if(pos.y > pos.y2) {
//     pos.status = true;
// } else {
//     pos.status = false;
// }
// pos.y2 = pos.y
if, else 문으로 사용시 위와같이 된다

pos.status = (pos.y > pos.y2) ? true : false;
console.log(pos.status)
pos.y2 = pos.y;
});

위에 조건문에 적은 삼항연산자 사용하여 true false 도출시키게 하였고 이 값으로 헤더가 내려오게 올라오게 클래스네임 추가하여 수정 가능.
바로직전 나보다 숫자가 크다면 스크롤이 내려가고, 적다면 스크롤이 올라가고 있는 것이니 이것으로 감지하는 아주 거지발싸개같은 아이디어의 코드이다