Question

我希望我的导航栏有一个效果slideDown而不是fideIn。有可能吗？

这是带有.fideIn：

的代码

$(document).ready(function () {
    $("#navbar").hide();

    $(window).scroll(function () {
        $("#navbar").fadeIn(500);

        if ($("body").scrollTop() == 0) {
            $("#navbar").fadeOut(500);
        }
    });
});

Demo

我试图改变.fadeIn - ＆gt; slideDown但效果未见。为什么？我犯了一些错误？或者不可能产生这种效果？

Answer 1

我假设您正在使用position:fixed;在这种情况下，如果您在#navbar上没有内容进行测试，则可能需要指定宽度。这是一个简单的例子：http://jsfiddle.net/82xara3x/

$(document).ready(function () {
    $("#navbar").hide();

    $(window).scroll(function () {
        $("#navbar").stop().slideDown(500);

        if ($("body").scrollTop() == 0) {
            $("#navbar").stop().slideUp(500);
        }
    });
});

#navbar {
    background: #000;
    height: 50px;
    width: 100%;
    position: fixed;
    top: 0px;
}

向下滚动，您应该看到它。希望这有帮助！

修改显示您的HTML和CSS将有助于确定您的问题。

Answer 2

试试这个兄弟

$( window ).scroll( function(){  
      if( $( this ).scrollTop() > 1 ){
          $("#navbar").animate({top:0}, 800 );
      }else{
          $("#navbar").animate({top:'-100%'}, 800 );
      }  
});

slideDown / slideUp用于滚动条

2 个答案: