Question

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?

Answer 1

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');
    }
});

http://jsfiddle.net/Kat9s/1/