I have a page of which when you scroll and bring the div 'fixed' right at top:0 it becomes position:fixed
so that the content beneath it scrolls.
Now, on that header there are buttons that brings you to each div section using a sliding effect.
When the position becomes fixed, the content taps up for about 100px.
Example: http://www.screenr.com/Rbts
and here is the real example: http://jsfiddle.net/Kat9s/
How can I stop that?
I added a filler class. This class is applied to your #content when your fixed element becomes fixed. It's logic is simple, it fills the space when needed.
.filler{margin-bottom:140px}
$(window).scroll(function(){
if( $(window).scrollTop() > stickyHeaderTop ) {
$('#fixed').addClass("sticky");
$('#first').removeClass("fixed");
$('#content').addClass('filler');
} else {
$('#fixed').removeClass("sticky");
$('#content').removeClass('filler');
}
});
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.