带动画的引导导航词缀（向下滑动/向上滑动）答案

【问题标题】：bootstrap nav affix w/ animation (slidedown/slideup)带动画的引导导航词缀（向下滑动/向上滑动）
【发布时间】：2015-02-17 21:53:10
【问题描述】：

希望创建一个类似于http://www.invisionapp.com/ 上的导航的导航

以下代码导致我的导航在越过data-offset-top 位置后向下滑动（向下滚动页面时），但我无法弄清楚如何在越过data-offset-top 位置时向上滑动导航（同时向上滚动页面）。

$('#navigation').on('affixed.bs.affix',function(){
    $(this).height('75');
    $(this).slideDown(200);
});

有没有人有一个像http://www.invisionapp.com/ 这样工作的导航的工作小提琴？谢谢！

【问题讨论】：

也许晚了，但我仍然为你找到答案:)

标签： jquery twitter-bootstrap nav affix

【解决方案1】：

我尝试使用 Bootstrap 3 词缀实现与您相同的目标，但没有成功。因此，与其使用 Bootstrap 词缀，不如创建自定义粘性导航更容易。

在我的场景中，导航在通过滚动达到特定像素偏移后会变得粘滞。在到达该点之前，导航是隐藏的。当它显示时，它会从顶部滑动。当我向后滚动时，它会滑到远离屏幕的顶部。

HTML 部分

将任何内容添加到 div 中，我在其中有一个徽标和主导航。

<div id="menu-bar"></div>

CSS 部分

我使用 CSS3 过渡，因为它们是 well supported（IE

#menu-bar {
    position: fixed;
    top: -200px;
    width: 100%;
    transition: top 0.5s ease 0s;
    -webkit-transition: top 0.5s ease 0s;
    -moz-transition: top 0.5s ease 0s;
    -o-transition: top 0.5s ease 0s;
}

JavaScript 部分

我使用 jQuery，也许你可以不用它，但它会比这个解决方案复杂得多。无论如何，你都使用 jQuery 作为 Bootstrap。

var $document = $(document),
    $element = $('#menu-bar');

$document.scroll(function() {
    if ($document.scrollTop() >= 850) {
        $element.stop().css({
            top: '0px'
        });
    } else {
        $element.stop().css({
            top: '-200px'
        });
    }
});

JSFiddle 来看看它的实际效果！我添加了一些样式，以便可以轻松看到粘性元素。

【讨论】：