Question

希望创建一个行为类似于http://www.invisionapp.com/

上的导航的导航

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

data-offset-top

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

Answer 1

我尝试使用Bootstrap 3附加功能实现相同的功能，但没有成功。因此，不是使用Bootstrap词缀，而是更容易创建自定义粘性导航。

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

HTML部分

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

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

CSS部分

我使用CSS3过渡，因为它们是well supported（除了IE＆lt; = 9）并且它们的动画最适合所需的效果，比jQuery animate（）更好。当我在到达偏移量后继续滚动以启动动画时，jQuery animate（）效果会变慢。使用CSS3，无需停止滚动即可使动画流畅，其效果仍然是即时的。

#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 for 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看到它在行动！我添加了一些样式，因此可以很容易地看到粘性元素。

带动画的bootstrap nav affix（滑动/滑动）

1 个答案: