gpt4 book ai didi

twitter-bootstrap - 如何使用滚动后显示的 Bootstrap 创建隐藏导航栏?

转载 作者:行者123 更新时间:2023-12-03 12:02:21 25 4
gpt4 key购买 nike

您能告诉我如何使用 Bootstrap 创建一个隐藏的导航栏,并且仅在您开始滚动页面后才显示?

最佳答案

这是导航栏淡入的变体,您可以控制用户在导航栏出现之前需要滚动多远:http://jsfiddle.net/panchroma/nwV2r/

它应该适用于大多数元素,而不仅仅是导航栏。

使用您的标准 HTML

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));

关于twitter-bootstrap - 如何使用滚动后显示的 Bootstrap 创建隐藏导航栏?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23315031/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com