CSS 如何在 twitter 的 bootstrap 2.1.0 中使用新的词缀插件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12070970/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use the new affix plugin in twitter's bootstrap 2.1.0?
提问by Dynalon
The bootstrap documentation on that topic is a little confusing to me. I want to achieve similar behaviour like in the docs with the affix navbar: The navbar is below a paragraph / page heading, and upon scrolling down it should first scroll along until reaching the top of the page, and then stick there fixed for further scrolldowns.
关于该主题的引导程序文档让我有点困惑。我想在带有后缀导航栏的文档中实现类似的行为：导航栏位于段落/页面标题下方，向下滚动时，它应该首先滚动直到到达页面顶部，然后固定在那里以进一步向下滚动.
As jsFiddle does not work with the navbar concept, I've set up a separate page for usage as a minimal example: http://i08fs1.ira.uka.de/~s_drr/navbar.html
由于 jsFiddle 不适用于导航栏概念，因此我设置了一个单独的页面作为最小示例：http: //i08fs1.ira.uka.de/~s_drr/navbar.html
I use this as my navbar:
我用它作为我的导航栏：
<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 -->
I thinkg i would want data-offset-topto be of value 0 (since the bar should "stick" to the very top" but with 50 there is at least some effect watchable.
我想我希望data-offset-top值为 0（因为条形图应该“粘”到最顶部”，但是 50 至少有一些效果可以观察。
If also put the javascript code in place:
如果还放置了 javascript 代码：
<script>
$(document).ready (function (){
$(".navbar").affix ();
});
</script>
Any help appreciated.
任何帮助表示赞赏。
回答by namuol
I was having a similar problem, and I believe I found an improved solution.
我遇到了类似的问题，我相信我找到了改进的解决方案。
Don't bother specifying data-offset-topin your HTML. Instead, specify it when you call .affix():
不要费心data-offset-top在 HTML 中指定。相反，在调用时指定它.affix()：
$('#nav').affix({
offset: { top: $('#nav').offset().top }
});?
The advantage here is that you can change the layout of your site without needing to update the data-offset-topattribute. Since this uses the actual computed position of the element, it also prevents inconsistencies with browsers that render the element at a slightly different position.
这里的优点是您可以更改站点的布局而无需更新data-offset-top属性。由于这使用元素的实际计算位置，因此它还可以防止浏览器在稍微不同的位置呈现元素的不一致。
You will still need to clamp the element to the top with CSS. Furthermore, I had to set width: 100%on the nav element since .navelements with position: fixedmisbehave for some reason:
您仍然需要使用 CSS 将元素夹在顶部。此外，我不得不设置width: 100%导航元素，因为.nav元素position: fixed由于某种原因行为不端：
#nav.affix {
position: fixed;
top: 0px;
width: 100%;
}
One last thing: When an affixed element becomes fixed, its element no longer takes up space on the page, resulting in the elements below it to "jump". To prevent this ugliness, I wrap the navbar in a divwhose height I set to be equal to the navbar at runtime:
最后一件事：当一个附加元素变得固定时，它的元素不再占据页面上的空间，导致它下面的元素“跳跃”。为了防止这种丑陋，我将导航栏包裹在 a 中div，我在运行时将其高度设置为等于导航栏：
<div id="nav-wrapper">
<div id="nav" class="navbar">
<!-- ... -->
</div>
</div>
.
.
$('#nav-wrapper').height($("#nav").height());
回答by Dave Kiss
Just implemented this for the first time, and here's what I've found.
刚刚第一次实现了这个，这就是我发现的。
The data-offset-topvalue is the amount of pixels that you must scroll in order for the affixing effect to take place. In your case, once 50pxis scrolled, the class on your item is changed from .affix-topto .affix. You'd probably want to set data-offset-topto about 130pxin your use case.
该data-offset-top值是您必须滚动才能产生附加效果的像素数量。在您的情况下，一旦50px滚动，您的项目上的类将从 更改.affix-top为.affix。您可能希望在您的用例中设置data-offset-top为 about 130px。
Once this class change occurs, you must position your element in css by styling the positioning for class .affix. Bootstrap 2.1 already defines .affixas position: fixed;so all you need to do is add your own position values.
一旦发生此类更改，您必须通过设置 class 的定位样式来将您的元素定位在 css 中.affix。Bootstrap 2.1 已经定义.affix为position: fixed;所以你需要做的就是添加你自己的位置值。
Example:
例子：
.affix {
position: fixed;
top: 20px;
left: 0px;
}
回答by Corbin U
To fix this very issue I have modified the affix plugin to emit a jQuery event when an object is affixed or unaffixed.
为了解决这个问题，我修改了附加插件，以便在附加或未附加对象时发出 jQuery 事件。
Here is the pull request: https://github.com/twitter/bootstrap/pull/4712
这是拉取请求：https: //github.com/twitter/bootstrap/pull/4712
And the code: https://github.com/corbinu/bootstrap/blob/master/js/bootstrap-affix.js
和代码：https: //github.com/corbinu/bootstrap/blob/master/js/bootstrap-affix.js
And then do this to attach the navbar:
然后执行此操作以附加导航栏：
<script type="text/javascript">
$(function(){
$('#navbar').on('affixed', function () {
$('#navbar').addClass('navbar-fixed-top')
});
$('#navbar').on('unaffixed', function () {
$('#navbar').removeClass('navbar-fixed-top')
});
});
</script>
回答by Patrick Laughlin
You need to remove .affix()from your script.
您需要.affix()从脚本中删除。
Bootstrap gives the option of accomplishing things either via data-attributesor straight JavaScript most of the time.
data-attributes大多数情况下，Bootstrap 提供了通过JavaScript 或直接使用 JavaScript来完成任务的选项。
回答by Jesus Rodriguez
I've got this from the twitterbootstrap's source code and it's working pretty well:
我从 twitterbootstrap 的源代码中得到了这个，它运行良好：
HTML:
HTML：
<div class="row">
<div class="span3 bs-docs-sidebar">
<ul id="navbar" class="nav nav-list bs-docs-sidenav">
...
</ul>
</div>
</div>
CSS:
CSS：
.bs-docs-sidenav {
max-height: 340px;
overflow-y: scroll;
}
.affix {
position: fixed;
top: 50px;
width: 240px;
}
JS:
JS：
$(document).ready(function(){
var $window = $(window);
setTimeout(function () {
$('.bs-docs-sidenav').affix({
offset: {
top: function (){
return $window.width() <= 980 ? 290 : 210
}
}
})
}, 100);
});
回答by Voldy
Thanks to namuol and Dave Kiss for the solution.
In my case I had a tiny problem with navbar height and width when I used afflix and collapse plugins together. The problem with width can be easily solved inheriting it from parent element (container in my case). Also I could manage to make it collapsing smoothly with a bit of javascript (coffeescript actually). The trick is to set wrapper height to autobefore collapse toggle occurs and fix it back after.
感谢 namuol 和 Dave Kiss 的解决方案。就我而言，当我将 afflix 和折叠插件一起使用时，导航栏的高度和宽度有一个小问题。宽度问题可以通过从父元素（在我的例子中为容器）继承来轻松解决。此外，我可以设法使用一些 javascript（实际上是咖啡脚本）使其顺利折叠。诀窍是auto在发生折叠切换之前将包装高度设置为并在之后修复它。
Markup (haml):
标记（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:
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()
回答by Beckovsky
You just need to remove the script. Here is my example:
您只需要删除脚本。这是我的例子：
<!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>
回答by Adrian
Similar to the accepted answer, you can also do something like the following to do everything in one go:
与接受的答案类似，您也可以执行以下操作，一次性完成所有操作：
$('#nav').affix({
offset: { top: $('#nav').offset().top }
}).wrap(function() {
return $('<div></div>', {
height: $(this).outerHeight()
});
});?
This not only invokes the affixplugin, but will also wrap the affixed element in a div which will maintian the original height of the navbar.
这不仅会调用affix插件，还会将附加元素包装在一个 div 中，这将保持导航栏的原始高度。
回答by Florian
My solution for attach the navbar :
我附加导航栏的解决方案：
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();
});
}
