引导导航贴w/动画(滑动/滑动)
引导导航贴w/动画(滑动/滑动)
提问于 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/那样工作的导航小提琴吗？谢谢!
回答 1
Stack Overflow用户
发布于 2015-07-07 23:53:54
我试着用Bootstrap 3词缀实现你需要的同样的东西，但没有成功。因此，与使用引导贴贴不同，创建自定义粘性导航更容易。
在我的场景中，导航应该在到达某个像素后被滚动抵消而变得粘稠。在到达点之前，导航是隐藏的。当它显示时，它从顶部滑行。当我向后滚动时，它会从屏幕上滑到顶部。
HTML部件
添加任何内容到div，我有一个标志和主导航在那里。
<div id="menu-bar"></div>CSS部件
我使用CSS3转换，因为它们是支持良好 ( IE <= 9除外)，它们的动画最符合所期望的效果，远比jQuery动画()更好。当我到达偏移量启动动画后继续滚动时，jQuery动画()效果会减慢。使用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来引导。
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看到它的行动！我添加了一些样式，这样就可以很容易地看到粘性元素。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28571824
复制相关文章
相似问题
腾讯云开发者
