twitter-bootstrap 如何使用滚动后显示的引导程序创建隐藏的导航栏？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23315031/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create a hidden navbar with bootstrap that shows after you scroll?
提问by Valentin-Nicusor Barbu
Can you tell me how I can create with bootstrap a navbar which is hidden and only shows after you start scrolling the page ?
你能告诉我如何用引导程序创建一个隐藏的导航栏，只有在你开始滚动页面后才会显示吗？
回答by David Taiaroa
Here's a variation where the navbar fades in and you can control how far users need to scroll before the navbar appears: http://jsfiddle.net/panchroma/nwV2r/
这是导航栏淡入的变体，您可以控制用户在导航栏出现之前需要滚动多远：http: //jsfiddle.net/panchroma/nwV2r/
It should work on most elements, not just navbars.
它应该适用于大多数元素，而不仅仅是导航栏。
Use your standard HTML
使用您的标准 HTML
JS
JS
(function ($) {
$(document).ready(function(){
// hide .navbar first
$(".navbar").hide();
// fade in .navbar
$(function () {
$(window).scroll(function () {
// set distance user needs to scroll before we start fadeIn
if ($(this).scrollTop() > 100) {
$('.navbar').fadeIn();
} else {
$('.navbar').fadeOut();
}
});
});
});
}(jQuery));
回答by Anuruddha Thennakoon
Refer this site: https://redvinestudio.com/how-to-make-a-menu-fade-in-on-scroll-using-jquery/
请参阅此站点：https: //redvinestudio.com/how-to-make-a-menu-fade-in-on-scroll-using-jquery/
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
(function($) {
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 200) {
$('#menu').fadeIn(500);
} else {
$('#menu').fadeOut(500);
}
});
});
})(jQuery);
</script>
回答by wanted70a
This is improved version with cached element and dynamic scroll value.
这是具有缓存元素和动态滚动值的改进版本。
$(document).ready(function(){
var $nav = $('.nav');//Caching element
// hide .navbar first - you can also do this in css .nav{display:none;}
$nav.hide();
// fade in .navbar
$(function () {
$(window).scroll(function () {
// set distance user needs to scroll before we start fadeIn
if ($(this).scrollTop() > 100) { //For dynamic effect use $nav.height() instead of '100'
$nav.fadeIn();
} else {
$nav.fadeOut();
}
});
});
});
回答by Nyein
You should find that solution on this w3schools website. You do not need bootstrap. You can do it with only css and javascript.
您应该在这个 w3schools 网站上找到该解决方案。您不需要引导程序。您可以仅使用 css 和 javascript 来完成。
回答by ???? ???????
This answer will work Because of the scrollbar way to go down it will hide and if the scrollbar up it will show not in one point
这个答案会起作用因为滚动条向下的方式它会隐藏，如果滚动条向上它不会显示在一点
//The variable takes the value of the new position each time
var scrollp=0;
(function ($) {
$(document).ready(function(){
$(function () {
$(window).scroll(function () {
// ask about the position of scroll
if ($(this).scrollTop() < scrollp) {
$('.navbar').fadeIn();
scrollp= $(this).scrollTop();
} else {
$('.navbar').fadeOut();
scrollp= $(this).scrollTop();
}
});
});
});
}(jQuery));<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>