I want my navbar to only show after scrolling. I've done that with JS but there's a "step" when it slides up or down. Here is the JS code :
$(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);
}
});
});
});
And the JSfiddle : http://jsfiddle.net/3dcg2ygw/
How can I get it smooth ?
I would use a fade in jQuery function
$(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();
}
});
});
});
The problem is that the navbar has a minimum height, try this in your code:
.navbar {
height: 97px;
background-color: #fff;
overflow:hidden;
min-height:0px;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.