引导导航贴上W /动画（了slideDown /效果基本show）

想要创建一个行为像上http://www.invisionapp.com/引导导航贴上W /动画（了slideDown /效果基本show）

下面的代码会导致我的导航栏上的NAV导航穿越data-offset-top位置（而向下滚动页面后滑下），但我不知道如何在穿过data-offset-top的位置时向上滑动导航（同时滚动页面）。

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

没有任何人有工作方式类似于http://www.invisionapp.com/一个导航工作小提琴？谢谢！

来源

2015-02-17 Chase D

也许晚了，但我仍然有你的答案:) – TeeJay 2015-07-07 23:55:42

我试图用Bootstrap 3词缀实现相同的功能，但没有成功。所以，不要使用Bootstrap词缀来创建自定义粘性导航。

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

HTML部分

添加任何内容进入格，我有一个标志，并在那里的主要导航。

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

CSS部分

我使用CSS3过渡，因为它们是well supported（除了IE < = 9）和它们的动画适合所期望的效果最大，方式优于jQuery的动画（）。在达到偏移量后继续滚动以开始动画时，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作为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看到它在行动！我添加了一些样式，以便可以轻松看到粘性元素。

来源

2015-07-07 23:53:54 TeeJay

引导导航贴上W /动画（了slideDown /效果基本show）

回答

相关问题