[英]Bootstrap Navbar slide on scroll not smooth
我希望导航条仅在滚动后显示。 我已经用JS完成了,但是当它向上或向下滑动时都有一个“步骤”。 这是JS代码:
$(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/
如何使它光滑?
我会在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();
}
});
});
});
问题在于导航栏具有最小高度,请在您的代码中尝试以下操作:
.navbar {
height: 97px;
background-color: #fff;
overflow:hidden;
min-height:0px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.