基础粘页首滚动答案

【问题标题】：Foundation sticky header first scroll基础粘页首滚动
【发布时间】：2016-01-31 16:06:08
【问题描述】：

这是我的代码：

<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 类的好处。

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

【问题讨论】：

请提供jsfiddle。
您的顶栏是从页面顶部开始的吗？

标签： jquery html css zurb-foundation sticky

【解决方案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>

【讨论】：

是的，这就是我最终要做的。感谢您的澄清！