CODEWITHSUNDEEP
jquerycss
Dan
Dan

Reputation: 1660

Scrolling sticky header causing following div to jump when it reaches the top

I have an issue with a scrolling header, it starts life at the bottom of the browser, once the page scrolls down and the header reaches the top, it fixes.

The issue is when it fixes, the following div will say jump the height of the header to the top.

Here's my jQuery

var elementPosition = $('header').offset();

$(window).scroll(function(){
    if($(window).scrollTop() > elementPosition.top){
        $('header').addClass("stick");
    } else {
        $('header').removeClass("stick");
    }
});

and here's the css

.stick {
    position:fixed;
    top:0;
}

Upvotes: 0

Views: 4576

Answers (1)

Luke Twomey
Luke Twomey

Reputation: 1285

The problem occurs because when making the header fixed, you are removing it from the flow of the page. In doing so, the following content "jumps" up to take its place.

One solution is to add a "ghost" div which is the same height as the header, and hidden by default.

At the point the header reaches the top of the window and you fix it in place, you also unhide the ghost div, which immediately takes its place and prevents the following content from jumping up.

Another solution is to add "margin-top" to the following content, for however tall your header is. This will have the same effect and will prevent the rest of the page content jumping.

Upvotes: 4

Related Questions