如何在 twitter 的 bootstrap 2.1.0 中使用新的词缀插件? [英] How to use the new affix plugin in twitter's bootstrap 2.1.0?

问题描述

关于该主题的引导程序文档让我有点困惑.我想在带有后缀导航栏的文档中实现类似的行为:导航栏位于段落/页面标题下方，向下滚动时它应该首先滚动直到到达页面顶部，然后固定在那里以进一步向下滚动.

由于 jsFiddle 不适用于导航栏概念，因此我设置了一个单独的页面作为最小示例:http://i08fs1.ira.uka.de/~s_drr/navbar.html

我用它作为我的导航栏:

<div class="navbar-inner"><div class="容器"><div class="span12"><a class="brand" href="#">我的品牌</a>这是我的导航栏.

<!-- 容器-->

<!-- 导航栏内部 -->

<!-- 导航栏-->

我想我希望 data-offset-top 的值为 0(因为条形应该粘"到最顶部"，但是 50 至少有一些效果可以观看.

如果还把 javascript 代码放在适当的位置:

 <脚本>$(document).ready (function (){$(".navbar").词缀();});

感谢任何帮助.

解决方案

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

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

$('#nav').词缀({偏移量:{ 顶部:$('#nav').offset().top }});

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

<小时>

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

#nav.affix {位置:固定；顶部:0px；宽度:100%；}

<小时>

最后一件事:当一个附加元素变得固定时，它的元素不再占据页面上的空间，导致它下面的元素跳跃".为了防止这种丑陋，我将导航栏包裹在 div 中，我将其高度设置为在运行时等于导航栏:

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

.

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

<小时>

这是查看它运行的强制性 jsFiddle.

The bootstrap documentation on that topic is a little confusing to me. I want to achieve similar behaviour like in the docs with the affix navbar: The navbar is below a paragraph / page heading, and upon scrolling down it should first scroll along until reaching the top of the page, and then stick there fixed for further scrolldowns.

As jsFiddle does not work with the navbar concept, I've set up a separate page for usage as a minimal example: http://i08fs1.ira.uka.de/~s_drr/navbar.html

I use this as my navbar:

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

I thinkg i would want data-offset-top to be of value 0 (since the bar should "stick" to the very top" but with 50 there is at least some effect watchable.

If also put the javascript code in place:

     <script>
        $(document).ready (function (){
            $(".navbar").affix ();
        });
     </script>

Any help appreciated.

解决方案

I was having a similar problem, and I believe I found an improved solution.

Don't bother specifying data-offset-top in your HTML. Instead, specify it when you call .affix():

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

The advantage here is that you can change the layout of your site without needing to update the data-offset-top attribute. Since this uses the actual computed position of the element, it also prevents inconsistencies with browsers that render the element at a slightly different position.

---

You will still need to clamp the element to the top with CSS. Furthermore, I had to set width: 100% on the nav element since .nav elements with position: fixed misbehave for some reason:

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

---

One last thing: When an affixed element becomes fixed, its element no longer takes up space on the page, resulting in the elements below it to "jump". To prevent this ugliness, I wrap the navbar in a div whose height I set to be equal to the navbar at runtime:

<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.

这篇关于如何在 twitter 的 bootstrap 2.1.0 中使用新的词缀插件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！