如何在Bootstrap 3导航栏中使用headroom.js？
我找到了这个JavaScript小工具http://wicky.nillia.ms/headroom.js/，我想在Bootstrap3的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
回答 4
Stack Overflow用户
发布于 2013-12-19 09:13:53
我找到了这个问题的解决方案。您需要添加此样式。
<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的源码链接。
Stack Overflow用户
发布于 2013-12-18 18:42:52
试试这个：
<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/
Stack Overflow用户
发布于 2014-07-23 06:56:57
接受答案中的样式并不是让headroom.js在Twitter Bootstrap 3中工作所必需的，只需遵循instructions就可以在导航条固定顶部中工作。主要的事情是你给这些类分配样式，否则什么都不会发生。
.headroom--pinned {
display: block;
}
.headroom--unpinned {
display: none;
}https://stackoverflow.com/questions/20648451
复制相似问题