blocks|key|167750|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|167751|<script+type="text/javascript">
++++++++$(".navbar-fixed-top").headroom();
</script>|code-block|syntax|javascript|167752|来源：http://codeasp.net/blogs/raghav_khunger/microsoft-net/2314/how-to-use-headroom-js|offset|length|167753|演示：http://fiddle.jshell.net/raghav_khunger/d7QQ8/2/show/light/|167754|entityMap|0|LINK|mutability|MUTABLE|url|http://codeasp.net/blogs/raghav_khunger/microsoft-net/2314/how-to-use-headroom-js|1|http://fiddle.jshell.net/raghav_khunger/d7QQ8/2/show/light/^0|0|0|3|29|0|0|3|1N|1|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@$I|Z|J|10|1|11]]|A|$]]|$1|K|3|L|5|6|7|12|8|@]|9|@$I|13|J|14|1|15]]|A|$]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]|U|$5|P|Q|R|A|$S|V]]]]

<p>Try this :</p>

<pre><code>&lt;script type="text/javascript"&gt;
        $(".navbar-fixed-top").headroom();
&lt;/script&gt;
</code></pre>

<p>Source : <a href="http://codeasp.net/blogs/raghav_khunger/microsoft-net/2314/how-to-use-headroom-js" rel="noreferrer">http://codeasp.net/blogs/raghav_khunger/microsoft-net/2314/how-to-use-headroom-js</a></p>

<p>Demo : <a href="http://fiddle.jshell.net/raghav_khunger/d7QQ8/2/show/light/" rel="noreferrer">http://fiddle.jshell.net/raghav_khunger/d7QQ8/2/show/light/</a></p>


blocks|key|169470|text|我找到了这个问题的解决方案。您需要添加此样式。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|169471|<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>|code-block|syntax|javascript|169472|来源：http://codeasp.net/blogs/raghav_khunger/microsoft-net/2314/how-to-use-headroom-js|offset|length|169473|感谢Fox+Genki的源码链接。|169474|entityMap|0|LINK|mutability|MUTABLE|url|http://codeasp.net/blogs/raghav_khunger/microsoft-net/2314/how-to-use-headroom-js|1|https://stackoverflow.com/users/1402896/fox-genki^0|0|0|3|29|0|0|2|9|1|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@$I|Z|J|10|1|11]]|A|$]]|$1|K|3|L|5|6|7|12|8|@]|9|@$I|13|J|14|1|15]]|A|$]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]|U|$5|P|Q|R|A|$S|V]]]]

<p>I found the solution to the problem. You need to add this style.</p>

<pre><code>&lt;style type="text/css"&gt;
.headroom {position: fixed;top: 0;left: 0;right: 0;transition: all .2s ease-in-out;}
.headroom--unpinned {top: -100px;}
.headroom--pinned {top: 0;}
&lt;/style&gt;
</code></pre>

<p>Source: <a href="http://codeasp.net/blogs/raghav_khunger/microsoft-net/2314/how-to-use-headroom-js" rel="nofollow noreferrer">http://codeasp.net/blogs/raghav_khunger/microsoft-net/2314/how-to-use-headroom-js</a></p>

<p>Thanks <a href="https://stackoverflow.com/users/1402896/fox-genki">Fox Genki</a> for the source link.</p>


blocks|key|2977735|text|我尝试了上面所有的步骤，但直到我将"!important“添加到styles.So中，它才起作用，它变成了这样：<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>它现在起作用了:)|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2977736|entityMap^0|1K|5X|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>I tried all the above steps but it wasn't working until i added "!important" to the styles.So it became this:
<code>&lt;style type="text/css"&gt;
.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;}
&lt;/style&gt;</code>
 its working now :)</p>


blocks|key|2977751|text|接受答案中的样式并不是让headroom.js在Twitter+Bootstrap+3中工作所必需的，只需遵循instructions就可以在导航条固定顶部中工作。主要的事情是你给这些类分配样式，否则什么都不会发生。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2977752|.headroom--pinned+{
++++display:+block;
}
.headroom--unpinned+{
++++display:+none;
}|code-block|syntax|javascript|2977753|entityMap|0|LINK|mutability|MUTABLE|url|http://wicky.nillia.ms/headroom.js/^0|1J|C|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>The styles in the accepted answer aren't required to get headroom.js to work w/ Twitter Bootstrap 3. Simply following the <a href="http://wicky.nillia.ms/headroom.js/" rel="nofollow">instructions</a> will work with navbar-fixed-top. The main thing is that you assign styles to these classes, otherwise nothing appears to happen.</p>

<pre><code>.headroom--pinned {
    display: block;
}
.headroom--unpinned {
    display: none;
}
</code></pre>


<p>I found this JavaScript widget <a href="http://wicky.nillia.ms/headroom.js/">http://wicky.nillia.ms/headroom.js/</a> 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? </p>

<p>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. </p>

<hr>

<p><strong>Resolved</strong></p>

<p>You need to add this style.</p>

<pre><code>&lt;style type="text/css"&gt;
.headroom {position: fixed;top: 0;left: 0;right: 0;transition: all .2s ease-in-out;}
.headroom--unpinned {top: -100px;}
.headroom--pinned {top: 0;}
&lt;/style&gt;
</code></pre>

<p>Source: <a href="http://codeasp.net/blogs/raghav_khunger/microsoft-net/2314/how-to-use-headroom-js">http://codeasp.net/blogs/raghav_khunger/microsoft-net/2314/how-to-use-headroom-js</a></p>


How do you use headroom.js with Bootstrap 3 navbar?

我找到了这个JavaScript小工具，我想在Bootstrap3的web应用程序中使用它，但它似乎不起作用。有什么建议或例子我应该怎么做吗？我目前在导航栏上使用navbar -fixed top。我试过使用和不使用它，但它仍然不起作用。我可以看到应用于头部的headroom.js类，但对UI元素没有任何影响。解析的您...

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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