如何在twitter的bootstrap 2.1.0中使用新的词缀插件？

Question

关于该主题的bootstrap文档对我来说有点混乱.我希望实现类似于使用词缀导航栏的文档中的行为:导航栏位于段落/页面标题下方,向下滚动时,应首先滚动直到到达页面顶部,然后将其固定以进一步滚动向下.

由于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>

任何帮助赞赏.

Answer 1

我遇到了类似的问题,我相信我找到了一个改进的解决方案.

不要data-offset-top在HTML中指定.而是在调用时指定它.affix():

$('#nav').affix({
    offset: { top: $('#nav').offset().top }
});?

这里的优点是您可以更改站点的布局,而无需更新data-offset-top属性.由于这使用了元素的实际计算位置,因此它还可以防止与将元素呈现略微不同位置的浏览器不一致.

您仍然需要使用CSS将元素夹到顶部.此外,我必须设置width: 100%导航元素,因为.nav元素position: fixed由于某种原因行为不端:

#nav.affix {
    position: fixed;
    top: 0px;
    width: 100%;
}

最后一件事:当固定元素固定时,其元素不再占用页面上的空间,导致其下方的元素"跳跃".为了防止这种丑陋,我将导航栏包装在div我设置为在运行时等于导航栏的高度:

<div id="nav-wrapper">
    <div id="nav" class="navbar">
        <!-- ... -->
    </div>
</div>

.

$('#nav-wrapper').height($("#nav").height());

这是强制性的jsFiddle,看它在行动.

Answer 2

刚刚第一次实现了这个,这就是我发现的.

该data-offset-top值是您必须滚动以便进行粘贴效果的像素数量.在你的情况下,一旦50px滚动时,你的项目类是从变.affix-top到.affix.您可能希望在用例中设置data-offset-top为about 130px.

一旦发生这种类更改,您必须通过设置类的定位来将元素放在css中.affix.Bootstrap 2.1已经定义.affix为position: fixed;您需要做的就是添加自己的位置值.

例:

.affix {
    position: fixed; 
    top: 20px; 
    left: 0px;
}

Answer 3

为了解决这个问题,我修改了一个affix插件,当一个对象被粘贴或不固定时发出一个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>