您如何将 headroom.js 与 Bootstrap 3 导航栏一起使用？

Posted 2023-03-06

【中文标题】您如何将 headroom.js 与 Bootstrap 3 导航栏一起使用？

【英文标题】：How do you use headroom.js with Bootstrap 3 navbar?

【发布时间】：2014-01-06 01:25:08

【问题描述】：

我找到了这个 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

【参考方案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提供源链接。

【讨论】：

欢迎您，请接受您的回答以帮助其他有相同问题的人。

有没有人找到弥补折叠子导航/子菜单的好方法？当导航栏缩回时，只有导航栏被隐藏，子菜单不被隐藏。当应用“slideup”类来破解它时，我尝试将 subnav 不透明度设置为零，但它仍然很笨重。

@jp_inc 在 headroom.js 参数中，您可以挂钩在固定和取消固定时执行操作的事件。也许您可以使用该事件来触发引导程序用来显示和隐藏下拉菜单的任何内容。

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

【参考方案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/

【讨论】：

消息来源给了我答案。您需要添加一些额外的样式以使其正常工作。谢谢！

【参考方案3】：

接受的答案中的样式不需要让 headroom.js 与 Twitter Bootstrap 3 一起工作。只需遵循 instructions 即可与 navbar-fixed-top 一起使用。主要是您为这些类分配样式，否则似乎什么也不会发生。

.headroom--pinned 
    display: block;

.headroom--unpinned 
    display: none;

【参考方案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> 它现在可以工作了:)

【讨论】：

我不太擅长 CSS，但我认为您的其他样式会覆盖 .headroom。