D
D
Den Sabrov2021-06-14 11:44:58
css
Den Sabrov, 2021-06-14 11:44:58

Appearing header - how to solve the problem with the animation of the bounce of the viewport from the bottom border (Chrome)?

When scrolling quickly in Chrome (Android), the viewport bounces and bounces a little from the bottom of the site, thereby causing an unwanted header appearance trigger.

How can you set a trigger threshold to avoid such random triggers? Those. do not use strictly if(mywindow.scrollTop() > mypos) , but make some delta of several pixels?

Used code:

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;}

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question