Jquery 向下滑动整个div，而不是在向下滑动/向下滑动时显示

我有一个功能，当标题向下滚动时达到某个div时，徽标向下滑动到导航栏上。这是可行的，但使用jQuery向下滑动似乎“显示”了div，而不是一次显示整个div并向下滑动该div

它所做的是正常的，因为我正在使用这里的元素：

但当我将鼠标悬停在导航上时，我希望看到如下示例：

还有其他方法使用css的JQuery吗？任何链接都将是伟大的

以下是我的jQuery以支持我的问题：

$(".logo .visible").hide(); 

    var topOfOthDiv = $("#home-2").offset().top;

    $(window).scroll(function(e) {
        e.preventDefault();
        if($(window).scrollTop() > topOfOthDiv) { //scrolled past the other div?
            $(".logo .visible").slideDown(300); //reached the desired point -- show div
        }else{
            $(".logo .visible").slideUp(300);
        }
    });

徽标css：

h1.logo {
    width:126px;
    height:58px;
    float:left;
    margin:0 0 0 40px;
    margin-left:40px;

}

.logo .visible{
    display:none;
    height:100%;
    background-color:#2e2e2e;
    background:url(../images//logo.jpg) no-repeat;
}

html

在jsfiddle中，当点击项目时，面板会“显示”自身，而不是将div整体向下滑动（如示例链接进一步向上^^）。希望这是有意义的

---

链接：

您可以使用

动画

将其向下滑动，而不是

向下滑动。
例如，您可以使用：

您确实需要对此代码进行一些调整
您能为您的问题设置一个解决方案吗？你的HTML没有提供足够的支持，所以我不确定问题出在哪里，尽管它“似乎”应该可以正常工作。添加了js fiddle示例：）哈哈，现在我更困惑了，你发布的jsFiddle确实做了它应该做的事情。你的预期结果是什么，因为我试图帮助你解决这个问题，但我还没有看到“问题”？你显然当时没有读到他的问题。他想在不调整高度的情况下把潜水器滑下来。很难解释我很抱歉！正如您在链接中看到的，面板中显示了文本。想象div为全尺寸，并设置“向下”动画。我的网站示例有一个徽标图像，图像向下滑动，因为它显示了图像，而不是向下滑动div。滑动dix中的内容似乎固定在div中并向下滚动，而不是显示其中的内容？我已经使用了您的示例对其进行了排序，在之前的评论中，我使用了“animate”和“top”两个词，所以我几乎做到了！一旦我的代码被完善，我会发布它。谢谢我已经在我的脚本中包含了jQuery，它很棒，但是出于一些奇怪的原因，它需要很长时间才能向下滑动，即使我将其更改为“快速”，并且它只在动画页边距顶部和幻灯片背面，好吗？我已经在你的答案中包含了我的代码。Thanksah似乎只出现在firefox上-必须进行研究！
<div id="nav">
        <div class="nav_wrapper">
        <h1 class="logo"><div class="visible"></div></h1>
            <ul id="navigation">
            </ul>
        </div>
     </div>

$(document).ready(function(){
  $("#flip").on('click', function(){
      $("#panel").animate({'margin-top': 0}, 1000);
  });
});