gpt4 book ai didi

javascript - jQuery .animation() 延迟启动

转载 作者:行者123 更新时间:2023-11-27 23:59:02 29 4
gpt4 key购买 nike

我正在尝试创建一个 jquery 动画,当我向下滚动时我希望我的标题隐藏(margin-top 变为负值),并在我开始向上滚动时尽快重新出现。到目前为止我能够做到这一点,但问题是动画需要时间才能开始!

这是我的js代码:

$(function(){
headerOrgOffset = $('#topnav').height()
});

$(window).scroll(function () {
var currentScroll = $(this).scrollTop();
if (currentScroll > headerOrgOffset) {
if (currentScroll > previousScroll) {
$("#header-wrap").animate({marginTop:'-40px'},200);
} else {
$("#header-wrap").animate({marginTop:'0px'},200);
}
}
previousScroll = currentScroll;
});

我创建了一个 fiddle为此

我该如何解决这个问题?

谢谢!

最佳答案

这与 murdoch 的回答类似,假设通过说动画开始缓慢,您要么希望动画非常快,要么希望它在您开始滚动时开始

var prevScroll;
var hidden = false;

$(window).scroll(function() {
var currentScroll = $(this).scrollTop();
if (prevScroll) {
console.log(currentScroll + " " + prevScroll);
console.log(hidden);
if (currentScroll < prevScroll && hidden) {
console.log('show');
$("#header-wrap").animate({
marginTop: '0px'
}, 0);
hidden = false;

} else if (currentScroll > prevScroll && !hidden) {
console.log(hidden);
console.log('hiding');
$("#header-wrap").animate({
marginTop: '-40px'
}, 0);
hidden = true;
}
} else if (!hidden) {
console.log('first time');
$("#header-wrap").animate({
marginTop: '-40px'
}, 0);
hidden = true;
}
prevScroll = currentScroll;
});
#topnav {
position: absolute;
margin: auto;
padding-top: 20px;
height: 60px;
width: 576px;
bottom: 0;
}

#header-wrap {
background: #f1f2f2;
height: 60px;
position: fixed;
width: 100%;
}

body {
height: 1000px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<header id="header-wrap">
<nav id="topnav">
<!-- my nav options-->
</nav>
</header>
</body>

关于javascript - jQuery .animation() 延迟启动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22333418/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com