滚动触发的动画极度延迟 [英] scroll triggered animation extremely delayed
问题描述
Using jQuery, I am trying to make a navbar similar to this Wordpress plugin: The navbar is hidden/offscreen when the page is loaded, slides down to a fixed position when a certain scroll position is reached, and slides back up to its offscreen position when the user scrolls back up to the top.
我设法做到了,但是,时机完全不对:滚动后可能要花费几秒钟,直到出现菜单栏.向上滚动时会更糟:起初我以为它根本不起作用,但是然后,有时经过15秒甚至更长的时间,它最终又向上移动了.
I managed to do it, however, the timing is completely wrong: It can take a few seconds after scrolling until the menu bar appears. And it's worse when scrolling up: At first I thought that it doesn't work at all, but then, after sometimes 15 seconds or even more, it eventually moves back up.
这是我的代码:
$(window).scroll(function() {
var scrollposition = $(window).scrollTop();
if (scrollposition > 100) {
$("#main_navigation").animate({
top: "0px"
}, 600);
};
if (scrollposition < 100) {
$("#main_navigation").animate({
top: "-82px"
}, 400);
};
});
html,
body {
margin: 0;
height: 100%;
}
.content {
height: 200%;
background: #fda;
padding: 5em 3em;
}
nav#main_navigation {
position: fixed;
z-index: 1;
top: -82px;
width: 100%;
background: #fff;
height: 54px;
border-bottom: 1px solid #eee;
}
.logo {
display: inline-block;
position: relative;
top: 50%;
left: 2em;
margin: 0;
width: 36px;
transform: translateY(-50%);
}
nav#main_navigation ul {
position: relative;
top: 50%;
margin: 0;
transform: translateY(-50%);
display: inline-block;
list-style: none;
float: right;
margin-right: 0.8em;
}
nav#main_navigation li {
display: inline-block;
margin-right: 1.2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="main_navigation">
<div class="logo">(logo)</div>
<ul>
<li><a href="#">Welcome</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div class="content">
<p>This is the content. Scroll down at least 100px to make the navbar appear. This should take 0.6 seconds, but takes much longer.</p>
<p>Then scroll back up to make the navbar disappear again. This should only take 0.4 seconds...</p>
</div>
我想这可能与必须处理太多滚动事件有关,但是我不知道如何避免或过滤该事件.还是还有其他原因?
I suppose it might have to do with too many scroll events having to be handled, but I don't know how to avoid or filter that. Or is there another reason?
推荐答案
我发现:有很多滚动事件,并且每个滚动事件都会触发一个动画,这显然是对于浏览器来说太多了.在处理完所有这些动画并最终执行动画之前,要花很长时间,这会导致较长的延迟.
I figured it out: There are a lot of scroll events, and there is an animation triggered with each scroll event, which obviously is too much to handle for the browser. It takes a very long time until all those are processed and the animation is eventually performed, causing the long delay.
因此,我寻找了一种方法,使上下滑动的动画仅在触发另一个动画之前被触发一次.我使用了一个变量(status_1
),其默认值为"closed".当滚动值超过100时,仅当status_1
被关闭"时才触发第一个(向下滑动)动画.但是status_1
一旦被触发,就会被设置为打开",因此只要滚动值大于100,就不会再次被触发.与第二个if条件和动画相同:
So I looked for a way to have the down- and up-sliding animations only be triggered once before the other one is triggered. I used a variable (status_1
), whose default value is "closed". When the scroll value goes above 100, the first (down-sliding) animation is triggered only if status_1
is "closed". But as soon as it's triggered, status_1
is set to "open", so it won't be triggered again as long as the scroll value is above 100. Same with the second if-condition and animation:
var status_1 = "closed";
$(window).scroll(function() {
var scrollposition = $(this).scrollTop();
if ((scrollposition > 100) && (status_1 == "closed")) {
$('#main_navigation').animate({
top: '0px'
}, 600);
status_1 = "open";
};
if ((scrollposition < 100) && (status_1 == "open")) {
$('#main_navigation').animate({
top: '-82px'
}, 400);
status_1 = "closed";
};
});
html,
body {
margin: 0;
height: 100%;
}
.content {
height: 200%;
background: #fda;
padding: 5em 3em;
}
nav#main_navigation {
position: fixed;
z-index: 1;
top: -82px;
width: 100%;
background: #fff;
height: 54px;
border-bottom: 1px solid #eee;
}
.logo {
display: inline-block;
position: relative;
top: 50%;
left: 2em;
margin: 0;
width: 36px;
transform: translateY(-50%);
}
nav#main_navigation ul {
position: relative;
top: 50%;
margin: 0;
transform: translateY(-50%);
display: inline-block;
list-style: none;
float: right;
margin-right: 0.8em;
}
nav#main_navigation li {
display: inline-block;
margin-right: 1.2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="main_navigation">
<div class="logo">(logo)</div>
<ul>
<li><a href="#">Welcome</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div class="content">
<p>This is the content. Scroll down at least 100px to make the navbar appear. This should take 0.6 seconds.</p>
<p>Then scroll back up to make the navbar disappear again. This should only take 0.4 seconds...</p>
</div>
这篇关于滚动触发的动画极度延迟的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!