以下内容选取scrollTop值并按预期调整css:
$(window).scroll(function() {
if($window.scrollTop()>918){
$menu.css({top:'0px'});
}
else{
$menu.css({top:'80px'});
}
}
但是以下(更好的效果)不会。当滚动事件结束时,它似乎间歇性地触发
$(window).scroll(function() {
if($window.scrollTop()>918){
$menu.animate({top:'0px'},100);
}
else{
$menu.animate({top:'80px'},100);
}
}
任何想法为什么?如此简单,但让我精神振奋。当然,我错过了什么,任何帮助非常感谢
答案 0 :(得分:4)
因为当用户移动滚动条时滚动事件会多次触发,每次触发时都会启动一个新的动画,所以最终会出现一堆同时运行的动画以不同的方式移动菜单。
如果您停止上一个动画,它可能会有效:
$(window).scroll(function() {
if($window.scrollTop()>918){
$menu.stop(true).animate({top:'0px'},100);
} else {
$menu.stop(true).animate({top:'80px'},100);
}
}
但是,如果您在执行动画之前等待滚动操作完成,它可能会更好。有关等待滚动完成的jQuery加载项方法,请参阅this post。
$(window).scroll(function() {
var menuTarget = $window.scrollTop()>918 ? "0px": "80px";
// only do an animation if one isn't already going or
// the current animation target is not what we want
if (!$menu.is(":animated") || $menu.data("animTarget") !== menuTarget) {
// set the new target, stop the current animation and start new animation
$menu.data("animTarget", menuTarget)
.stop(true).animate({top: menuTarget},100);
}
}