twitter-bootstrap Bootstrap 3 在滚动时使用词缀将导航栏位置固定到顶部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19717290/
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
Bootstrap 3 using affix to fixing navbar position to top when scrolling
提问by kjaer108
This is driving me nuts... This might be simple by I'm not hitting the nail: please give a hint :-)
这让我发疯......这可能很简单，因为我没有击中钉子：请给出提示:-)
I'm trying to play with Bootstrap 3 for a new layout for my site. I want the navbar to pin to the top of the screen when I scroll.
我正在尝试使用 Bootstrap 3 为我的网站创建一个新的布局。我希望导航栏在滚动时固定到屏幕顶部。
I got it working but the content below navbar shifts when the affix class kicks in. I can't find my way around it.
我让它工作了，但是当词缀类开始时，导航栏下方的内容会发生变化。我找不到解决方法。
回答by Mo.
There are two option either javascript or HTML5 data-attribute
有两个选项 javascript 或 HTML5data-属性
Via data attributesTo easily add affix behavior to any element, just add data-spy="affix" to the element you want to spy on. Use offsets to define when to toggle the pinning of an element.
通过数据属性要轻松地向任何元素添加词缀行为，只需将 data-spy="affix" 添加到您要监视的元素。使用偏移来定义何时切换元素的固定。
<div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
...
</div>
Via JavaScriptCall the affix plugin via JavaScript:
通过 JavaScript 通过 JavaScript调用词缀插件：
$('#my-affix').affix({
offset: {
top: 100
, bottom: function () {
return (this.bottom = $('.footer').outerHeight(true))
}
}
})
DEMOhttp://jsfiddle.net/6P5sF/56/
演示http://jsfiddle.net/6P5sF/56/
reference http://getbootstrap.com/javascript/#affix-examples
