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>

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

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

Answer 1

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

当页面完全向上滚动时，背景从视口的最顶部开始。滚动后，此填充会立即创建一些空白区域，然后按下＃34;包含的内容，背景（因为它适用于身体的子节点）。

您可以使用类似这样的解决方法规则：

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

但我宁愿摆脱那个顶级填充，除非它是绝对必要的。

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

1 个答案: