bersus
@bersus
https://bersus.design

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

При быстрой прокрутке в 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;}
  • Вопрос задан
  • 52 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы