如何使用headroom.js与Bootstrap 3 navbar？ [英] How do you use headroom.js with Bootstrap 3 navbar?

问题描述

我发现这个JavaScript小部件 http://wicky.nillia.ms/headroom.js/ ，我想要在使用Bootstrap 3的Web应用程序中使用它。它似乎并不工作。任何建议或例子我应该做什么？

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?

我目前正在navbar上使用navbar-fixed-top。我试过有没有它，它仍然不工作。我可以看到headroom.js类应用于标题，但在UI元素中没有效果。

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.

已解决：

需要添加此样式。

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

资料来源： http://codeasp.net/blogs/raghav_khunger/microsoft-net/2314/how-to-use-headroom-js

推荐答案

我找到了问题的解决方案。您需要添加此样式。

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>

资料来源： http://codeasp.net/blogs/raghav_khunger/microsoft-net/2314/how-to-use-headroom-js

感谢 Fox Genki 查看来源连结。

这篇关于如何使用headroom.js与Bootstrap 3 navbar？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！