jQuery .animation()延迟启动
jQuery .animation()延迟启动
提问于 2014-03-11 18:25:06
我正在尝试创建一个jquery动画，当我向下滚动时，我希望我的头部隐藏(边距-顶部变为负值)，并在一开始滚动起来就重新出现。到目前为止，我还能做到这一点，但问题是动画需要时间才能开始！
这是我的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;
});我为此创建了一个小提琴
我该如何解决这个问题？
谢谢!
回答 2
Stack Overflow用户
发布于 2014-03-11 18:43:29
您需要注意滚动事件是在滚动时不断触发的，而不仅仅是向下滚动一次，向上滚动一次。因此，你必须确保你只在每个方向发射一次动画。
我已经修改了您的代码来完成这个任务，它现在对我很好，它使用了一个名为hidden的变量，它记录头部隐藏时可见的时间。每个方向只发射一次动画。
$(function() {
headerOrgOffset = $('#topnav').height()
});
var hidden = false;
var previousScroll = 0;
$(window).scroll(function() {
var currentScroll = $(this).scrollTop();
if (currentScroll > headerOrgOffset) {
if (currentScroll > previousScroll && !hidden) {
hidden = true;
$("#header-wrap").animate({
marginTop: '-40px'
}, 200);
} else if (currentScroll <= previousScroll && hidden) {
hidden = false;
$("#header-wrap").animate({
marginTop: '0px'
}, 200, function() {
state = '';
});
}
}
previousScroll = 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>
Stack Overflow用户
发布于 2014-03-11 18:44:27
您需要首先初始化previouscroll = 0。只有这样，滚动事件才会考虑到previousscroll --第一次滚动窗口
$(function() {
headerOrgOffset = $('#topnav').height();
previousScroll = 0;
$(window).scroll(function() {
var currentScroll = $(this).scrollTop();
if (currentScroll > headerOrgOffset) {
if (currentScroll > previousScroll) {
$("#header-wrap").stop().animate({
marginTop: '-40px'
}, 200);
} else {
$("#header-wrap").stop().animate({
marginTop: '0px'
}, 200);
}
}
previousScroll = 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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22333418
复制相关文章
相似问题
腾讯云开发者
