1
У меня есть div, который я хочу показать на свитке и скрыть, когда пользователь прокручивает назад, но работает, но не так, как ожидалось. Проблема в том, что когда я прокручиваю вниз, тогда это выглядит нормально, но когда я прокручиваю назад, происходит задержка в скрытии.JQuery animate speed issue
То, что я хочу, это показать div со слайдом сверху вниз и при укрытии снизу вверх.
Вот код, я пытался:
$(window).scroll(function() {
var fheader = $(".top-header");
if ($(this).scrollTop()>50)
{
$(fheader).animate({top: "0px"},{duration: 100, easing: "linear"});
}
else
{
$(fheader).animate({top: "-50px"},{duration: 100, easing: "linear"});
}
});.top-header {
width: 100%;
position: fixed;
height: 50px;
background: #fff;
border-bottom: 2px solid #ccc;
top: -50px;
left: 0;
}
.content {
width: 100%;
height: 1400px;
float: left;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="top-header">
header
</div>
<div class="content">
this is content
</div>
Стандартная проблема - поиск в SO для специфики. Вам нужно * debounce * событие прокрутки, когда вы анимации на каждом свитке «tick». например, если вы прокрутите вниз, он начнет прокручивать прокрутку, возможно, 100 раз, прежде чем вы начнете прокрутку резервной копии - каждый из этих аниматов должен завершиться до следующего. Отказ будет срабатывать только один раз, когда вы прекратите прокрутку. Добавьте 'console.log (" scroll ")' внутри обработчика, и вы увидите, как часто он стреляет. –
Альтернативой является сохранение предыдущей позиции прокрутки и просмотр, если она теперь превышает/находится под лимитом, и применять анимировать только при ее переходе/под и не при каждом вызове. –