Question

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

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

解决

您需要添加此样式。

<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

Answer 1

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

<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获取源链接。

Answer 2

试试这个：

<script type="text/javascript">
        $(".navbar-fixed-top").headroom();
</script>

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

演示：http://fiddle.jshell.net/raghav_khunger/d7QQ8/2/show/light/

Answer 3

接受答案中的样式并不需要让headroom.js与Twitter Bootstrap 3一起工作。只需遵循instructions即可使用navbar-fixed-top。主要的是你为这些类分配样式，否则似乎没有任何事情发生。

.headroom--pinned {
    display: block;
}
.headroom--unpinned {
    display: none;
}

Answer 4

我尝试了上述所有步骤，但直到我将“！important”添加到样式中才开始工作。所以它成了这样： <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> 它现在正在工作：）

你如何在Bootstrap 3导航栏中使用headroom.js？

4 个答案: