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

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

- James

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提供的源链接。

- James

---

欢迎您，请接受您的答案以帮助其他有同样问题的人。 - dardar.moh

有人找到了一种好的方法来补偿折叠的子菜单吗？当导航栏收起时，只有导航栏会隐藏而不是子菜单。我尝试设置在应用“slideup”类时子菜单的不透明度为零，以此来解决此问题，但仍然相当笨拙。 - jp_inc

在 headroom.js 的参数中，@jp_inc 可以挂钩事件，在固定和取消固定时执行某些操作。也许您可以使用该事件来触发 Bootstrap 用于显示和隐藏下拉菜单的内容。 - user1010892

@jp_inc 您可以使用此代码，以便子菜单会自动隐藏。 $('.nav a').click(function(){ $(".navbar-toggle").trigger( "click" ); }); - IqbalBary

Answer 2

试试这个:

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

Source : 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/ 这是关于如何使用Headroom.js的技术内容。以上链接为原文和示例链接。

- dardar.moh

---

源代码给了我答案。你需要添加一些额外的样式使其正常工作。谢谢！ - James

Answer 3

接受答案中的样式并不是必须的，只要按照说明操作即可与navbar-fixed-top一起使用headroom.js。主要是要为这些类分配样式，否则似乎什么都不会发生。

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

- Jack Frost

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>

现在它可以工作了 :)

- user3414896

---

我对CSS不是很擅长，但我认为你的其他样式覆盖了.headroom。 - James