Bootstrap Navbar滑动滚动不平滑
问题描述:
我希望我的导航栏在滚动后才显示。我已经用JS完成了,但是当它向上或向下滑动时有一个“步骤”。这里是JS代码:Bootstrap Navbar滑动滚动不平滑
$(document).ready(function(){
// hide .navbar first
$(".navbar").hide();
// fade in .navbar
$(function() {
$(window).scroll(function(){
// set distance user needs to scroll before we fadeIn navbar
if ($(this).scrollTop() > 100) {
$('.navbar').slideDown(2000);
}
else {
$('.navbar').slideUp(2000);
}
});
});
});
而且的jsfiddle:http://jsfiddle.net/3dcg2ygw/
我怎样才能得到它顺利?
答
的问题是,在导航栏的最小高度,在你的代码试试这个:
.navbar {
height: 97px;
background-color: #fff;
overflow:hidden;
min-height:0px;
}
答
我会在jQuery的功能使用淡入
$(document).ready(function() {
// hide .navbar first
$(".navbar").hide();
// fade in .navbar
$(function() {
$(window).scroll(function() {
// set distance user needs to scroll before we fadeIn navbar
if ($(this).scrollTop() > 100) {
$('.navbar').fadeIn().slideDown();
} else {
$('.navbar').fadeOut().slideUp();
}
});
});
});
这就是它!它现在完美运行。谢谢 ! – 2014-09-03 09:34:01