如何在twitter的bootstrap 2.1.0中使用新的附加插件？
关于这个主题的bootstrap文档让我有点迷惑。我想实现类似于文档中带有词缀navbar的行为:导航栏位于段落/页面标题的下方，向下滚动时，它应该首先滚动到页面顶部，然后固定在那里，以便进一步向下滚动。
由于jsFiddle不能与导航栏概念一起使用，因此我设置了一个单独的页面作为一个最小的示例：http://i08fs1.ira.uka.de/~s_drr/navbar.html
我使用它作为我的导航栏：
<div class="navbar affix-top" data-spy="affix" data-offset-top="50">
<div class="navbar-inner">
<div class="container">
<div class="span12">
<a class="brand" href="#">My Brand</a>
This is my navbar.
</div>
</div> <!-- container -->
</div> <!-- navbar-inner -->
</div> <!-- navbar -->我想我会希望data-offset-top的值为0(因为条形图应该“粘”在最上面“，但50的值至少有一些值得观察的效果。
如果还将javascript代码放在适当的位置：
<script>
$(document).ready (function (){
$(".navbar").affix ();
});
</script>感谢您的帮助。
回答 8
Stack Overflow用户
发布于 2012-08-23 07:09:10
这是我第一次实现它，这是我的发现。
data-offset-top值是为了产生附加效果而必须滚动的像素量。在您的示例中，一旦滚动了50px，项目上的类就会从.affix-top更改为.affix。在您的用例中，您可能希望将data-offset-top设置为about 130px。
一旦发生这种类更改，就必须通过设置类.affix的定位样式来在css中定位元素。Bootstrap 2.1已经将.affix定义为position: fixed;，所以你需要做的就是添加你自己的位置值。
示例：
.affix {
position: fixed;
top: 20px;
left: 0px;
}Stack Overflow用户
发布于 2012-08-26 06:52:02
为了解决这个问题，我修改了附加插件，当一个对象被附加或取消附加时，它会发出一个jQuery事件。
拉取请求如下：https://github.com/twitter/bootstrap/pull/4712
代码是：https://github.com/corbinu/bootstrap/blob/master/js/bootstrap-affix.js
然后执行以下操作以附加导航栏：
<script type="text/javascript">
$(function(){
$('#navbar').on('affixed', function () {
$('#navbar').addClass('navbar-fixed-top')
});
$('#navbar').on('unaffixed', function () {
$('#navbar').removeClass('navbar-fixed-top')
});
});
</script>Stack Overflow用户
发布于 2012-09-26 01:45:46
您需要从脚本中删除.affix()。
Bootstrap提供了在大多数情况下通过data-attributes或直接JavaScript完成任务的选项。
https://stackoverflow.com/questions/12070970
复制相似问题