jquery - 粘性顶栏导航下的跳跃背景 Foundation 5

Question

我想使用 Foundation 框架将背景放在标题部分的顶部导航栏下方。我做了类似的东西。它有效，但当我滚动背景时，图像看起来像在跳跃。

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

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

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

Answer 1

似乎“跳跃”的原因是在菜单栏固定位置后立即将 45px 填充顶部应用于主体。

当页面完全向上滚动时，背景从视口(viewport)的最顶部开始。一旦你滚动，这个填充就会出现，创建一些空白空间并“下推”内容，包括背景(因为它应用于主体的子节点)。

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

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

但除非绝对必要，否则我宁愿去掉顶部填充。