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

Posted 2023-02-22

技术标签:

【中文标题】如何在 twitter 的 bootstrap 2.1.0 中使用新的 affix 插件？【英文标题】：How to use the new affix plugin in twitter's bootstrap 2.1.0? 【发布时间】：2012-08-17 17:59:15 【问题描述】：

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

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

任何帮助表示赞赏。

【问题讨论】：

您是否尝试在页面的主导航栏上使用 affix()？ @NithinEmmanuel 是的，请参阅帖子或示例中的 javascript：i08fs1.ira.uka.de/~s_drr/navbar.html 为什么不使用 .navbar-fixed-top 而不是使用 affix()？ @NithinEmmanuel 因为那不是我想要的。 .navbar-fixed-top会一直将导航栏置于顶部。我想要一个位于导航栏上方的页眉，并且当向下滚动时（因此导航栏会滚动），它应该粘在顶部 - 然后只有这样。 Bootstrap 文档在他们以前的文档中使用了与 subnav 完全相同的机制，遗憾的是他们已经为 2.1.0 文档删除了它。一方面，您的 Javascript 嵌套不正确。 ); 应该是 ); 【参考方案1】：

第一次实现这个，这是我发现的。

data-offset-top 值是您必须滚动的像素数量，才能产生附加效果。在您的情况下，一旦滚动50px，您的项目上的类就会从.affix-top 更改为.affix。在您的用例中，您可能希望将 data-offset-top 设置为大约 130px。

一旦发生此类更改，您必须通过设置类.affix 的定位样式将元素定位在css 中。 Bootstrap 2.1 已经将.affix 定义为position: fixed;，所以你需要做的就是添加你自己的位置值。

例子：

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

【讨论】：

谢谢，这有点工作。我已经更新了我的示例页面。现在的问题是，一旦导航栏作为 css 类获得“词缀”，导航栏 css 类就会被丢弃。但我认为这只是引导程序的一个错误/缺点。如果不使用 LESS 并重建引导程序，将不会很容易改变。在我看来 .navbar 类被保留了 - 你确定吗？感谢您的回答，我花了很长时间试图解决这个问题请参阅 my answer 以获得稍微改进的更通用的解决方案。【参考方案2】：

为了解决这个问题，我修改了 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>

【讨论】：

【参考方案3】：

我附加导航栏的解决方案：

function affixnolag()

    $navbar = $('#navbar');
    if($navbar.length < 1)
        return false;

    h_obj = $navbar.height();

    $navbar
        .on('affixed', function()      
            $navbar.after('<div id="nvfix_tmp" style="height:'+h_obj+'px">');
        )
        .on('unaffixed', function()
            if($('#nvfix_tmp').length > 0)
                $('#nvfix_tmp').remove();
        );

【讨论】：

【参考方案4】：

您需要从脚本中删除 .affix()。

Bootstrap 提供了在大多数情况下通过 data-attributes 或直接 JavaScript 来完成任务的选项。

【讨论】：

【参考方案5】：

您只需要删除脚本。这是我的例子：

<!DOCTYPE html>
<html>

<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>

  <style>
  #content 
    width: 800px;
    height: 2000px;
    background: #f5f5f5;
    margin: 0 auto;
  
  .menu 
    background: #ccc;
    width: 200px;
    height: 400px;
    float: left;
  
  .affix 
    position: fixed;
    top: 20px;
    left: auto;
    right: auto;
  
  </style>

</head>
<body>
    <div id="content">
        <div style="height: 200px"></div>

        <div class="affix-top" data-spy="affix" data-offset-top="180">
            <div class="menu">AFFIX BAR</div>
        </div>
    </div>
</body>
</html>

【讨论】：

【参考方案6】：

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

不要费心在 HTML 中指定 data-offset-top。相反，请在调用 .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());

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

【讨论】：

删除“跳转”的好技巧 - 完全忽略了这个项目被删除的事实，并认为我的问题包含在我的代码的 affix/js 部分中。这个答案是最好的！一切正常。 “跳转”部分是我发现的大多数教程中缺少的部分。谢谢！一个重要的更正：在您的第一个代码 sn-p 中的 jquery 代码中使用 offset() 而不是 position()。说明： position() 函数为您提供父元素内的偏移量，但 offset() 是它在文档中的位置，这是您真正想要的（是的，名称是违反直觉的）。因此，如果您的 affix 元素在另一个元素内，您的代码将无法工作。您还应该只传递这样的“top”值： $("#nav").affix( offset: top: $('#nav').offset().top。它应该在 ready () 块，以便您知道页面布局已完成。谢谢@orrd -- 更新我的答案和小提琴！不错！完美运行，非常流畅。顺便说一句，我正在寻找带有粘性页脚的相同示例。如果你知道怎么做，你能更新 jsFiddle 吗？谢谢！【参考方案7】：

我从 twitterbootstrap 的源代码中得到了这个，它工作得很好：

HTML：

<div class="row">
    <div class="span3 bs-docs-sidebar">
        <ul id="navbar" class="nav nav-list bs-docs-sidenav">
            ...
        </ul>
    </div>
</div>

CSS：

.bs-docs-sidenav 
    max-height: 340px;
    overflow-y: scroll;


.affix 
    position: fixed;
    top: 50px;
    width: 240px;

JS：

$(document).ready(function()
    var $window = $(window);
    setTimeout(function () 
        $('.bs-docs-sidenav').affix(
            offset: 
                top: function ()
                    return $window.width() <= 980 ? 290 : 210
                
            
        )
    , 100);
);

【讨论】：

【参考方案8】：

感谢 namuol 和 Dave Kiss 的解决方案。在我的情况下，当我一起使用 afflix 和折叠插件时，导航栏的高度和宽度有一个小问题。宽度问题可以很容易地从父元素（在我的例子中是容器）继承它来解决。我也可以设法用一点javascript（实际上是coffeescript）让它顺利折叠。诀窍是在折叠切换发生之前将包装高度设置为auto，然后再将其修复。

标记（haml）：

#wrapper
  #navbar.navbar
    .navbar-inner
      %a.btn.btn-navbar.btn-collapse
        %span.icon-bar
        %span.icon-bar
        %span.icon-bar

      #menu.nav-collapse
        -# Menu goes here

CSS：

#wrapper 
  width: inherit;


#navbar 
  &.affix 
    top: 0;
    width: inherit;

咖啡脚本：

class Navigation
  @initialize: ->
    @navbar = $('#navbar')
    @menu = $('#menu')
    @wrapper = $('#wrapper')

    @navbar.affix(offset: @navbar.position())
    @adjustWrapperHeight(@navbar.height())

    @navbar.find('a.btn-collapse').on 'click', () => @collapse()

    @menu.on 'shown', () => @adjustWrapperHeight(@navbar.height())
    @menu.on 'hidden', () => @adjustWrapperHeight(@navbar.height())

  @collapse: ->
    @adjustWrapperHeight("auto")
    @menu.collapse('toggle')

  @adjustWrapperHeight: (height) ->
    @wrapper.css("height", height)

$ ->
  Navigation.initialize()

【讨论】：

【参考方案9】：

与接受的答案类似，您也可以执行以下操作来一次性完成所有操作：

$('#nav').affix(
  offset:  top: $('#nav').offset().top 
).wrap(function() 
  return $('<div></div>', 
    height: $(this).outerHeight()
  );
);

这不仅会调用affix 插件，还会将附加的元素包装在一个div中，从而保持导航栏的原始高度。

【讨论】：

以上是关于如何在 twitter 的 bootstrap 2.1.0 中使用新的 affix 插件？的主要内容，如果未能解决你的问题，请参考以下文章

如何在 webapp 或 yo angular 上更新和包含 Twitter Bootstrap 3？

导航栏顶部的 Twitter-Bootstrap-2 徽标图像

如何使用 Twitter Bootstrap v3.0 构建两列流体布局

如何使用 scrollspy 制作 Twitter Bootstrap 2.x 导航栏

如何创建可打印的 Twitter-Bootstrap 页面

如何让 twitter-bootstrap 导航栏子项在小屏幕上折叠/展开？