Question

我试图在jquery顶级菜单中创建，高度取决于窗口滚动位置。当我使用$（selector）.css（“height”，“value”）;一切都很好但是当我尝试通过动画做到这一点时，它无法正常工作。这是我的代码。谢谢你的帮助。

<!DOCTYPE   html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<style>
</style>
<body>
    <nav style="background-color:red; height:100px;" class="navbar-fixed-top navbar navbar-default my-navbar">
    </nav>
    <div style="width:100%; height:2000px; background-color:blue;" class="content"> 
    </div>

    <script>
        $(document).ready(function(){
            $(window).scroll(function(){
                var top=$(window).scrollTop();
                if(top>10){
                    $(".my-navbar").animate({height: '50px'}, "slow");
                }else{
                    $(".my-navbar").animate({height: '100px'}, "slow");
                }
            })
        })
    </script>
</body>
</html>

Answer 1

第一个解决方案：

将stop()用于animation：

$(window).scroll(function(){
var top=$(window).scrollTop();
if(top > 10){
$(".my-navbar").stop().animate({height: '50px'}, "slow");
}else{
$(".my-navbar").stop().animate({height: '100px'}, "slow");
}
})

<强> jsFiddle

第二个解决方案：

使用addClass和removeClass：

$(window).scroll(function(){
var top=$(window).scrollTop();
if(top > 10){
$(".my-navbar").addClass('NavBar2');
}else{
$(".my-navbar").removeClass('NavBar2');
}
})

<强> jsFiddle

Answer 2

问题并非完全不起作用，它只是“它没有按预期工作”，因为如果你离开它一段时间它就能完成它的工作。问题是，当您尝试再次为其设置动画时，之前的动画仍在运行。您可能需要先调用jquery方法stop（）

来停止上一个动画

if(top>10){
    $(".my-navbar").stop().animate({height: '50px'}, "slow");
}else{
    $(".my-navbar").stop().animate({height: '100px'}, "slow");
}

希望有所帮助

在滚动动画菜单上

2 个答案: