Показать div после прокрутки назад

Question

Я хочу показать верхнюю панель, когда пользователь прокручивается назад к вершине сайта.

Так, например, пользователь прокручивается вниз на минимум 300-400 пикселей, а затем, когда он снова прокручивается до примерно 100 пикселей (слева вверху сайта), панель должна переключаться/отображаться.

Благодарим за помощь! :)

Answer 1

Вы можете добавить прослушиватель событий в document, чтобы проверить, когда пользователь прокручивает страницу вниз. После того, как они попали в предустановленную точку останова, вы можете удалить hidden класс от вашего NavBar элемента, например, так:

var breakpoint = 400; 
var navbar = $('.nav-bar'); 
$(document).scroll(function(){ 
    if($(this).scrollTop() >= breakpoint) { 
     navbar.removeClass('hidden', 500); 
    } 
}); 

Если Navbar фиксирована, вы можете также проверить логическую переменную, чтобы увидеть, если пользователь прокрутил мимо точку останова, а затем установите значение true. Если они прокручиваются мимо точки останова, вы можете показать навигационную панель следующим образом:

var breakpoint = 400; 
var scrolledPastBreakpoint = false; 
var navbar = $('.nav-bar'); 
$(document).scroll(function(){ 
    if($(this).scrollTop() >= breakpoint) { 
     scrolledPastBreakpoint = true; 
    }; 
    if($(this).scrollTop() < breakpoint && scrolledPastBreakpoint) { 
     navbar.removeClass('hidden', 500); 
    }; 
});