Foundation sticky header 第一卷

Question

我正在使用 Foundation 5 and the sticky header。

这是我的代码：

<header>
  <div class="sticky">
    <nav class="top-bar" data-topbar role="navigation">
      <!-- Blablabla -->
    </nav>
  </div>
</header>

这个版本的问题是第一次向下滚动时，粘性header不起作用。我必须向下滚动，然后向上滚动到页面顶部，然后粘性 header 起作用。

之后，我添加了 class 固定 <div class="sticky fixed"> 但是一旦页面加载，这会将我的元素隐藏在页面顶部而不是在它们上方。

所以我的解决方法是添加，然后在页面加载后删除 class fixed。有了这个改变，header 在第一次滚动时变得粘稠，但它看起来不是完美的解决方案，而且它有副作用：/

$('header .sticky').addClass("fixed");
$('header .sticky').removeClass("fixed");

另一种解决方案是固定 header 并对所有元素应用 margin-top。但是我们失去了 sticky class.

的好处

有更好的解决方案/找到问题的根源吗？

Answer 1

当您只需要使用 .fixed 时，听起来您正在使用 .sticky。区别是：

.fixed 适用于 topbar 位于页面顶部的情况。
.sticky 适用于 topbar 不在页面顶部的情况。

如果您的 topbar 从页面顶部开始，请使用：

<div class="fixed">
  <nav class="top-bar" data-topbar role="navigation">
    <nav class="top-bar" data-topbar role="navigation">
      <!-- Blablabla -->
    </nav>
  </nav> 
</div>

如果您的 topbar 从页面下方的位置开始，请使用：

<div class="contain-to-grid sticky">
  <nav class="top-bar" data-topbar role="navigation" data-options="sticky_on: large">
    <!-- Blablabla -->
  </nav>
</div>

Foundation sticky header 第一卷

Foundation sticky header first scroll

jquery

html

css

zurb-foundation

sticky