如何在twitter的bootstrap 2.1.0中使用新的词缀插件？
有关该主题的引导文档对我来说有点困惑。 我想实现类似的行为，就像文档中的词缀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至less有一些效果watchable。
如果还把JavaScript代码放在适当的位置：
<script> $(document).ready (function (){ $(".navbar").affix (); }); </script>
任何帮助赞赏。
我有一个类似的问题，我相信我find了一个改进的解决scheme。
不要打扰在HTML中指定data-offset-top 。 而是在调用.affix()时指定它：
$('#nav').affix({ offset: { top: $('#nav').offset().top } });
这样做的好处是，您可以更改网站的布局，而无需更新data-offset-top属性。 由于这使用了元素的实际计算位置，所以它还可以防止将元素渲染到稍微不同的位置的浏览器的不一致性。
您仍然需要将元素用CSS固定在顶部。 此外，我必须在导航元素上设置width: 100% ，因为带有position: fixed .nav元素position: fixed由于某种原因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看到它在行动 。
刚刚实施这个，这是我发现的。
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; }
为了解决这个问题，我修改了词缀插件，当一个对象被粘贴或不固定的时候发出一个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>
您需要从脚本中删除.affix() 。
Bootstrap提供了大部分时间通过data-attributes或直接JavaScript实现事物的选项。
我从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); });
你只需要删除脚本。 这是我的例子：
<!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>
感谢namuol和Dave Kiss的解决scheme。 在我的情况下，当我使用afflix和崩溃插件在一起时，我有一个navbar高度和宽度的小问题。 宽度的问题可以很容易地解决从父元素（在我的情况下容器）inheritance它。 另外，我可以设法使它与一些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; } }
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()
我的附加导航栏的解决scheme：
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(); }); }
与被接受的答案类似，您也可以执行下列操作：
$('#nav').affix({ offset: { top: $('#nav').offset().top } }).wrap(function() { return $('<div></div>', { height: $(this).outerHeight() }); });
这不仅调用了affix插件，而且还将粘贴的元素包裹在一个div中，该div将保持导航栏的原始高度。
