Question

I have some jquery that hides and shows the nav at a certain point on page scroll. The only problem is that when the navs poisition is changed from relative to fixed it shifts all of the content on the page upwards to fill the space where the nav was. I can’t seem to find a solution that works. Here is the script:

if ($(this).scrollTop() > 800) {
    $('nav a').css({
        "color": "#555"
    });
    $('header').css({
        "position": "fixed",
        "top": "0px",
        "background": "white"
    });
} else {
    if ($(this).scrollTop() <= 800) {
        $('nav a').css({
            "color": "white"
        });
        $('header').css({
            "position": "relative",
            "top": "0px",
            "background": "none"
        });
    }
}

Answer 1

When doing this, you should always style the nav with position: absolute; before it becomes fixed after scrolling a certain amount. You’ll need to style the rest of your content to allow space for the nav section (so it’ll need to remain a fixed height) but you won’t have any “jump” effect.