slideDown/slideUp 用于滚动条

Question

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

这是带有 .fideIn 的代码：

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

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

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

Demo

我尝试更改.fadeIn -> 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 用于滚动条

slideDown/slideUp for scrollbar

jquery

scroll

slide

slidedown

slideup