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

问题描述

关于这个主题的引导文档对我有点混乱。我想实现类似的行为，如在文档与affix navbar：导航栏是在一个段落/页面标题下面，向下滚动它应该首先滚动，直到到达页面的顶部，然后坚持固定为进一步的向下滚动。

由于jsFiddle与navbar概念不兼容，我已经设置了一个单独的页面作为一个最小的例子：http://i08fs1.ira.uka.de/~s_drr/navbar.html

我使用这个作为我的navbar：

 < div class =navbar affix-topdata-spy =附加data-offset-top =50> 
< div class =navbar-inner> 
< div class =container> 
< div class =span12> 
< a class =brandhref =＃>我的品牌< / a> 
这是我的navbar。 
< / div> 
< / div> <！ -  container  - > 
< / div> <！ -  navbar-inner  - > 
< / div> <！ -  navbar  - > 
  

我想我会想要 data-offset-top 为值0（因为条应该粘贴到最顶部，但是50有至少一些效果可观察。

如果还将JavaScript代码：

 < script> 
 $（document）.ready（function（）{
 $（。navbar）。affix（）; 
}）; 
< / script> 
  

任何帮助感谢。

解决方案

我有一个类似的问题，改进的解决方案。

不要在HTML中指定 data-offset-top 当你调用 .affix（）：

  $ '）.affix（{
 offset：{top：$（'＃nav'）。offset（）。top} 
}）; 
  pre> 
 
 
这里的优势是你可以改变你的网站的布局，而不需要更新 data-offset-top 属性。由于这使用元素的实际计算位置，它还可以防止与将元素置于稍微不同位置的浏览器不一致。
 
 
 
 
 
 
您仍然需要使用CSS将元素夹到顶部。此外，我必须在nav元素上设置 width：100％，因为 .nav 元素与位置：固定由于某种原因导致错误：
 ＃nav.affix {
 position ：固定; 
 top：0px; 
 width：100％; 
} 
  
 
 
 
 
 
 
固定的元素变得固定，其元素不再占用页面上的空间，导致其下面的元素跳跃。为了防止这种丑陋，我将navbar包裹在一个 div 中，其高度在运行时设置为等于navbar：
 < div id =nav-wrapper> 
< div id =navclass =navbar> 
<！ -  ...  - > 
< / div> 
< / div> 
  
。
  $（'＃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.

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