twitter-bootstrap 您如何将 headroom.js 与 Bootstrap 3 导航栏一起使用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20648451/
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 do you use headroom.js with Bootstrap 3 navbar?
提问by James
I found this JavaScript widget http://wicky.nillia.ms/headroom.js/and I want to use it in a web application using Bootstrap 3. It doesn't seem to be working. Any suggestion or example what I should do?
我在http://wicky.nillia.ms/headroom.js/找到了这个 JavaScript 小部件，我想在使用 Bootstrap 3 的 Web 应用程序中使用它。它似乎不起作用。任何建议或示例我应该做什么？
I'm currently using navbar-fixed-top on the navbar. I tried with and without it and it is still not working. I can see the headroom.js classes applied to the header but there is no effect in the UI elements.
我目前在导航栏上使用 navbar-fixed-top。我试过有没有它，但它仍然无法正常工作。我可以看到应用于标题的 headroom.js 类，但在 UI 元素中没有效果。
Resolved
解决
You need to add this style.
您需要添加此样式。
<style type="text/css">
.headroom {position: fixed;top: 0;left: 0;right: 0;transition: all .2s ease-in-out;}
.headroom--unpinned {top: -100px;}
.headroom--pinned {top: 0;}
</style>
Source: http://codeasp.net/blogs/raghav_khunger/microsoft-net/2314/how-to-use-headroom-js
来源：http: //codeasp.net/blogs/raghav_khunger/microsoft-net/2314/how-to-use-headroom-js
回答by James
I found the solution to the problem. You need to add this style.
我找到了解决问题的方法。您需要添加此样式。
<style type="text/css">
.headroom {position: fixed;top: 0;left: 0;right: 0;transition: all .2s ease-in-out;}
.headroom--unpinned {top: -100px;}
.headroom--pinned {top: 0;}
</style>
Source: http://codeasp.net/blogs/raghav_khunger/microsoft-net/2314/how-to-use-headroom-js
来源：http: //codeasp.net/blogs/raghav_khunger/microsoft-net/2314/how-to-use-headroom-js
Thanks Fox Genkifor the source link.
感谢Fox Genki提供源链接。
回答by dardar.moh
Try this :
试试这个 ：
<script type="text/javascript">
$(".navbar-fixed-top").headroom();
</script>
Source : http://codeasp.net/blogs/raghav_khunger/microsoft-net/2314/how-to-use-headroom-js
来源：http: //codeasp.net/blogs/raghav_khunger/microsoft-net/2314/how-to-use-headroom-js
Demo : http://fiddle.jshell.net/raghav_khunger/d7QQ8/2/show/light/
演示：http: //fiddle.jshell.net/raghav_khunger/d7QQ8/2/show/light/
回答by Hyman Frost
The styles in the accepted answer aren't required to get headroom.js to work w/ Twitter Bootstrap 3. Simply following the instructionswill work with navbar-fixed-top. The main thing is that you assign styles to these classes, otherwise nothing appears to happen.
接受的答案中的样式不需要让 headroom.js 与 Twitter Bootstrap 3 一起工作。只需按照说明操作即可使用 navbar-fixed-top。最重要的是你为这些类分配样式，否则什么都不会发生。
.headroom--pinned {
display: block;
}
.headroom--unpinned {
display: none;
}
回答by user3414896
I tried all the above steps but it wasn't working until i added "!important" to the styles.So it became this:
<style type="text/css">
.headroom {position: fixed;top: 0;left: 0;right: 0;transition: all .2s ease-in-out !important;}
.headroom--unpinned {top: -100px !important;}
.headroom--pinned {top: 0 !important;}
</style>its working now :)
我尝试了上述所有步骤，但直到我在样式中添加“！重要”之后它才起作用。所以它变成了这样：
<style type="text/css">
.headroom {position: fixed;top: 0;left: 0;right: 0;transition: all .2s ease-in-out !important;}
.headroom--unpinned {top: -100px !important;}
.headroom--pinned {top: 0 !important;}
</style>它现在可以工作了:)
