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

Question

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

<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

似乎 'leap' 的原因是在菜单栏固定位置后立即将 45px padding-top 应用于 body。

当页面完全向上滚动时，背景从视口的最顶部开始。一旦你滚动，这个填充就会出现，创建一些空白 space 和 "pushing down" 内容，包括背景（因为它应用于 body 的 child 节点）。

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

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

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

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

Leaping background under sticky top bar navigation Foundation 5

jquery

html

css

zurb-foundation-5