I have a navbar and when it scrolls past the 250px mark I apply the "fixed-top" CSS class and take it off when it goes below 250px but it comes in very in your face and looks really jumpy so I would like it to slide in and out when the class is being applied and removed. Any help would be great.
var fixedTops = function() {
$(window).bind('scroll', function() {
if ($(window).scrollTop() > 250) {
$('.fd_PageHeader').addClass('fixed-top');
} else {
$('.fd_PageHeader').removeClass('fixed-top');
}
});
};
fixedTops();
Trying to add animation from a
display: block
to a fixed element can't be done.A solution to hack this is using
opacity
. First you set it to0
, add or remove thefixed-top
class and then animate theopacity
.Working jsfiddle: Fiddle