Navbar показать/скрыть на прокрутке, как эффект пульсирующего эффекта затухания

Question

У меня проблема с моим сценарием JS, который скрывает мою навигационную панель на прокрутке вниз и показывает ее на прокрутке вверх.

Проблема в том, что navbar показывается и скрывается снова и снова ang снова smometimes при прокрутке вверх и то же самое для прокрутки вниз.

Кроме того, когда я просматриваю верхнюю часть страницы, навигатор скрывается сверху.

Как я могу исправить эту проблему с помощью моего сценария?

Вот мой код:

var lastScrollTop = 0; 
$(window).scroll(function() { 
    var currentScrollTop = $(this).scrollTop(); 
    if (currentScrollTop > lastScrollTop) { 
     $(".header").fadeOut(); 
    } else { 
     $(".header").fadeIn(); 
    } 
    lastScrollTop = currentScrollTop; 
}); 

Answer 1

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

function debounce(func, wait, immediate) { 
var timeout; 
return function() { 
    var context = this, args = arguments; 
    var later = function() { 
     timeout = null; 
     if (!immediate) func.apply(context, args); 
    }; 
    var callNow = immediate && !timeout; 
    clearTimeout(timeout); 
    timeout = setTimeout(later, wait); 
    if (callNow) func.apply(context, args); 
}; 
}; 

// call debounce logic by passing target event handler 
var optimisedFunc= debounce(function() { 
    var currentScrollTop = $(this).scrollTop(); 
    if (currentScrollTop > lastScrollTop) { 
     $(".header").fadeOut(); 
    } else { 
     $(".header").fadeIn(); 
    } 
    lastScrollTop = currentScrollTop; 
}, 250); 

$(window).scroll(function(){ 
     optimisedFunc(); 
}); 

выше логика дребезга делает больше, чем задержки в исполнении, см this для получения дополнительной информации.