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


110

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

由于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()?
Nithin Emmanuel 2012年

@NithinEmmanuel是的,请参阅帖子中或示例中的javascript:i08fs1.ira.uka.de/~s_drr/navbar.html
Dynalon

为什么不使用use .navbar-fixed-top而不是affix()?
Nithin Emmanuel

6
@NithinEmmanuel,因为那不是我想要的。.navbar-fixed-top将导航栏始终置于顶部。我想要导航栏上方的页面标题,并且当向下滚动时(因此导航栏可能会被滚动掉),它应该粘贴在顶部-然后然后才是。Bootstrap文档在以前的文档中使用了与subnav相同的机制,但遗憾的是,他们已为2.1.0文档删除了它。
Dynalon

1
首先,您的Javascript嵌套不正确。)};应该是});
Owen

Answers:


160

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

不要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());

这是强制性的jsFiddle才能看到它的实际效果


6
删除“跳转”的绝妙技巧-完全忽略了删除该项目的事实,并认为我的问题包含在我代码的affix / js部分中。
Thomas

1
这个答案是最好的!一切正常。我发现大多数教程中都缺少“跳转”部分。谢谢!
里卡多·奥特罗

1
一个重要的更正:在您的第一个代码段的jquery代码中,使用offset()而不是position()。说明:position()函数为您提供了父元素内的偏移量,但是offset()是其在文档中的位置,这是您实际想要的(是的,名称是违反直觉的)。因此,如果您的词缀元素位于另一个元素内,则您的代码将无法工作。您还应该只传递“ top”值,例如:$(“#nav”)。affix({ ()块,所以你知道的页面布局完成。
orrd

感谢@orrd-更新我的答案和小提琴!
namuol 2013年

真好!完美运行,非常流畅。顺便说一句,我正在寻找一个带有粘性页脚的示例。如果您知道该怎么做,可以更新jsFiddle吗?谢谢!
Jocelyn

76

刚刚第一次实施,这就是我所发现的。

data-offset-top值是必须滚动以使附加效果发生的像素数量。在您的情况下,一旦50px滚动,项目上的类将从更改.affix-top.affix。您可能希望在用例中将其设置data-offset-top130px

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

例:

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

1
谢谢,这有点用。我已经将示例页面更新为该页面。现在的问题是,一旦导航栏作为“ css类”获得“附加”,就将导航栏css类丢弃。但是我认为这只是引导程序的错误/缺点。如果不在LESS中禁用它并重建引导程序,将很难更改。
Dynalon

在我看来,.navbar保留课程是对的-您确定吗?
Dave Kiss

感谢您提供此答案,我花了很长时间试图弄清楚这一点
Reuben 2012年

请参阅我的答案,以获得稍微改进的更通用的解决方案。
namuol 2013年

5

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

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

Bootstrap在data-attributes大多数情况下都提供了通过JavaScript或直接实现JavaScript 的选项。


2

我已经从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);
});

1

您只需要删除脚本。这是我的示例:

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

1

感谢namuol和Dave Kiss的解决方案。就我而言,当我一起使用afflix和折叠插件时,导航栏的高度和宽度有一个小问题。宽度问题很容易解决,可以从父元素(在我的情况下为容器)继承来解决。我也可以设法用一些javascript(实际上是咖啡脚本)使其平滑折叠。诀窍是将包装器高度设置为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()

0

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

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

0

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

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

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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.