Появляющийся хедер — как решить проблему с анимацией отскока вьюпорта от нижней границы (Chrome)?

Question

[Den Sabrov]

При быстрой прокрутке в Chrome (Android) вьюпорт отскакивает и чуть подпрыгивает от нижней границы сайта, тем самым вызывая нежелательное срабатывание триггера появления хедера.

Как можно задать некий порог срабатывания триггера, чтобы избежать таких случайных срабатываний? Т.е. не использовать строго if(mywindow.scrollTop() > mypos), а сделать некую дельту в несколько пикселей?

Используемый код:

jQuery(document).ready(function($){
var mywindow = $(window);
var mypos = mywindow.scrollTop();
mywindow.scroll(function() {
if (mypos > 40) {
if(mywindow.scrollTop() > mypos)
{
$('#theheader').addClass('headerup');
}
else
{
$('#theheader').removeClass('headerup');
}
}
mypos = mywindow.scrollTop();
});
});

.header-2 {
 transform: translatey(-80px);
 -moz-transition: all .5s ease!important;
 -webkit-transition: all .5s ease!important;
 transition: all .5s ease!important;
}
.sticky--effects.header-2  {
 height: auto!important;
 transform: translatey(0px);
}
.headerup{
transform: translateY(-110px) !important;}

Comments

[Demian Smith]

Лучше решать такие штуки при помощи CSS. Например, используя position: sticky. Решения с добавлением/удалением классов по скроллу слишком нестабильны и подвержены ошибкам.

Если уж вас припёрло делать это на JS. То лучше найти какую-нибудь популярную библиотеку, в которой такие проблемы решены. Но в 21м веке JS для подобного уже не нужен, хватит и CSSa.

[Den Sabrov]

Demian Smith, хмм, а как это реализовать на чистом CSS? Sticky даёт закрепление хедера, но как обеспечить его появление при скролле вверх?

[Demian Smith]

Ой, я прошу прощения, не сразу врубился в проблему. Да, тут без JS никак. Вот проект для таких случаев https://github.com/WickyNilliams/headroom.js