跳跃背景下粘顶栏导航基础5

Question

我想使用Foundation框架在header部分的顶部栏导航栏下方放置背景。我也做过类似的东西。它工作，但当我滚动背景看起来像图像跳跃。

<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>

这里是一个css for header，它是body之后的第一个header元素。

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

Answer 1

看起来，'leap'的原因是在菜单栏固定位置后，在body上应用了45px的padding-top。

当页面完全向上滚动时，背景从视窗的最顶部开始。只要您滚动，这个填充出现创建一些空白空间，并"下推"内容，包括背景(因为它应用于body的子节点)。

你可以使用像这样的变通规则:

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

但是我宁愿去掉顶部的padding，除非它是绝对必要的