Leaping background under sticky top bar navigation Foundation 5

Question

I want to put background below the top-bar navigation in the header section, using Foundation framework. I made something like that. It works but when I scroll the background looks like the image leaping.

<header>
    <div class="contain-to-grid sticky">
        <nav class="top-bar" data-topbar role="navigation">
            <ul class="title-area">
                <li class="name">
                    <h1><a href="#">Logo</a></h1>
                </li>
            <li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
            </ul>
        </nav>
    </div>
</header>

And here is a css for header, which is the first header element after body.

body > header {
    background-image: url("../img/jumbotron.jpg");
    background-position: center center;
    height: 712px; }

Answer 1

It seems that the reason for the 'leap' is a 45px padding-top applied to the body right after the menu bar gets the position fixed.

When the page is scrolled up completely, the background starts from the very top of the viewport. As soon as you scroll, this padding appears creating some blank space and "pushing down" the contents, background included (since it's applied to a body's child node).

You could use a workaround rule like this one:

body.f-topbar-fixed > header {
    background-position-y: -45px;
}

But I'd rather get rid of that top padding unless it's strictly necessary.