基金會粘頁眉第一滾動

Question

我正在使用Foundation 5和粘性標頭 。

這是我的代碼：

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

這個版本的問題是， 當我第一次向下滾動時 ，粘性標頭不起作用。 我必須向下滾動，然后向上滾動到頁面頂部，並在粘性頁眉工作之后。

之后，我添加了固定的<div class="sticky fixed">但是一旦加載了頁面，這會將我的元素隱藏在頁面頂部，而不是它們上方。

所以我的解決方法是添加，然后在頁面加載后刪除fixed的類。 進行此更改后，標題在第一次滾動時便會發粘，但似乎並不是一個完美的解決方案，並且有副作用：/

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

另一種解決方案是修復標頭，並對所有元素應用margin-top 。 但是我們失去了sticky類的好處。

有更好的解決方案的想法/找到問題的根源嗎？

Answer 1

聽起來你正在使用.sticky時，你只需要使用.fixed 。 區別在於：

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