Блог

Я пытаюсь получить совокупное расстояние прокрутки пользователя. Если они меняют направление прокрутки, то суммарная прокрутка сбрасывается на расстояние их последней прокрутки, в противном случае (если в том же направлении) суммарная прокрутка увеличивается. Мне нужна эта цифра, чтобы я мог скрыть и отобразить навигационную панель на своем сайте только после того, как пользователь прокрутит более нескольких пикселей. В противном случае это слишком чувствительно.

Код, который у меня пока есть, работает не так, как я ожидаю. Иногда кумулятивное значение прокрутки не увеличивается, несмотря на то, что направление прокрутки остается прежним, в то время как в других случаях is начинает работать должным образом. Если бы кто-нибудь мог пролить свет на то, что я здесь делаю неправильно, я был бы очень признателен.

 const showHideHeader = (function(){

const doc = document.documentElement;
const w = window;

const contactInfo = document.querySelector(".contact-info");

let prevScroll = w.scrollY || doc.scrollTop;
let curScroll;
let direction = 0;
let prevDirection = 0;
let cumulativeScroll = 0;
let distanceScrolled = 0;

const checkScroll = function() {

    curScroll = w.scrollY || doc.scrollTop;
    distanceScrolled = Math.abs(curScroll - prevScroll);
    console.log(`distance scrolled is ${distanceScrolled}`);

    if (curScroll > prevScroll) { 
    
        direction = 2;
    }
    else if (curScroll < prevScroll) { 
    
        direction = 1;
    }

    if (direction === prevDirection) {
        cumulativeScroll  = distanceScrolled;
    } else if (direction !== prevDirection) {
        cumulativeScroll = distanceScrolled;
    }

    console.log(`cumulative scroll is ${cumulativeScroll}`);
    console.log(`direction is ${direction}`);

    if (cumulativeScroll > 10) {
        toggleHeader(direction, curScroll);
    }
  
    prevScroll = curScroll;
};

const toggleHeader = function(direction, curScroll) {
    if (direction === 2 amp;amp; curScroll > 85) { 

        header.classList.add("home-hide");
        contactInfo.classList.add("hide");
        prevDirection = direction;
    } else if (direction === 1) {

        header.classList.remove("home-hide");
        contactInfo.classList.remove("hide");
        prevDirection = direction;
    }
};

window.addEventListener('scroll', checkScroll);
 

})();