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

h79rfbju 于 2023-05-30 发布在 Bootstrap

关注(0)|答案(9)|浏览(139)

关于这个主题的bootstrap文档让我有点困惑。我想实现类似的行为，就像在文档中使用后缀navbar：导航条位于段落/页面标题下方，向下滚动时，它应该沿着直到到达页面顶部，然后固定在那里以进行进一步的滚动。
由于jsFiddle不支持navbar概念，我设置了一个单独的页面作为最小示例：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>

任何帮助感激不尽。

css

来源：https://stackoverflow.com/questions/12070970/how-to-use-the-new-affix-plugin-in-twitters-bootstrap-2-1-0

9条答案

按热度按时间

1qczuiv01#

我遇到了类似的问题，我相信我找到了一个改进的解决方案。
不要在HTML中指定data-offset-top。相反，在调用.affix()时指定它：

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

这样做的好处是，您可以更改站点的布局，而无需更新data-offset-top属性。由于这使用了元素的实际计算位置，因此还可以防止浏览器在稍微不同的位置呈现元素时出现不一致。
您仍然需要使用CSS将元素夹在顶部。此外，我必须在nav元素上设置width: 100%，因为.nav元素与position: fixed由于某种原因而行为不当：

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

最后一件事当一个附加的元素被固定后，它的元素不再占用页面上的空间，导致它下面的元素“跳跃”。为了防止这种丑陋，我将导航栏 Package 在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。

赞(0）回复(0）举报 2023-05-30

nbysray52#

这是我第一次实现它，这是我发现的。
data-offset-top值是为了产生粘贴效果而必须滚动的像素量。在本例中，一旦滚动50px，项目上的类将从.affix-top更改为.affix。在您的用例中，您可能希望将data-offset-top设置为大约130px。
一旦这个类发生了变化，你就必须在css中通过为.affix类的定位设置样式来定位你的元素。Bootstrap 2.1已经将.affix定义为position: fixed;，所以您需要做的就是添加自己的位置值。
示例：

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

赞(0）回复(0）举报 2023-05-30

rhfm7lfc3#

为了解决这个问题，我修改了affix插件，当一个对象被附加或取消附加时，它会发出一个jQuery事件。
下面是pull request：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>

赞(0）回复(0）举报 2023-05-30

wz1wpwve4#

您需要从脚本中删除.affix()。
Bootstrap在大多数情况下提供了通过data-attributes或直接使用JavaScript完成任务的选项。

赞(0）回复(0）举报 2023-05-30

doinxwow5#

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

赞(0）回复(0）举报 2023-05-30

juzqafwq6#

你只需要删除脚本。下面是我的例子：

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

赞(0）回复(0）举报 2023-05-30

y53ybaqx7#

感谢namuol和Dave Kiss提供的解决方案。在我的例子中，当我一起使用afflix和collapse插件时，我在导航栏的高度和宽度上遇到了一个小问题。宽度的问题可以很容易地解决，从父元素（在我的例子中是容器）继承它。我还可以用一点javascript（实际上是coffeescript）使它平滑地崩溃。诀窍是在折叠切换发生之前将 Package 器高度设置为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;
  }
}

Coffeescript：

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）回复(0）举报 2023-05-30

uz75evzq8#

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

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）回复(0）举报 2023-05-30

j0pj023g9#

类似于接受的答案，你也可以做一些像下面这样的事情来一次性完成所有事情：

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

这不仅调用了affix插件，而且还将附加元素 Package 在div中，这将保持导航栏的原始高度。

赞(0）回复(0）举报 2023-05-30

我来回答

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

9条答案

相关问题

热门标签

最新问答