css - 如何在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

我遇到了类似的问题，我相信我找到了改进的解决方案。

不要费心在 HTML 中指定 data-offset-top。相反，在调用 .affix() 时指定它:

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

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

---

您仍然需要使用 CSS 将元素固定在顶部。此外，我必须在 nav 元素上设置 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());

---

Here's the obligatory jsFiddle to see it in action .