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

Question

css

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