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

小编典典

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

css

关于该主题的引导文档使我有些困惑。我想实现类似的行为，例如在文档中使用词缀导航栏：导航栏位于段落/页面标题的下方，向下滚动时，它应该首先滚动直到到达页面顶部，然后固定在那里以便进一步向下滚动。

由于jsFiddle不适用于导航栏概念，因此我以最小的示例设置了单独的使用页面

我将其用作导航栏：

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

任何帮助表示赞赏。

阅读 261

2020-05-16

共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());

2020-05-16