html - 粘性顶部导航栏基础 6

Question

http://codepen.io/cigol/pen/reVMaK

<div class="row fullWidth" data-sticky-container>
 <div class="large-12 columns header-row sticky" data-sticky data-margin-top="0">
  <div class="small-4 columns">
   <img src="https://placehold.it/250x100">
  </div>
  <div class="small-8">
  </div>
 </div>
</div>

这是我正在使用的代码，它是基础 6 基础，我想要一个可响应和调整大小的粘性顶部栏。我尝试编写自己的代码只是因为当我剪切和粘贴示例时它们不起作用(由于某种原因它们都聚集在屏幕的左上角)。

我没有更改基本文件，我使用的唯一覆盖/附加 css 是在 codepen css 中。

我不确定为什么，但粘性在 codepen 上不起作用，但在我的本地浏览器上起作用。

无论如何，我希望你能看到我正在尝试做的事情。没什么复杂的。只是它没有完全发挥作用。在我本地的电脑上它可以工作，但是当我向上滚动时，一旦它到达顶部，背景颜色灰色就会闪烁，如果我向下滚动，它又会回来。我在 chrome 和 firefox 中试过，得到了相同的结果。

感谢任何帮助。

Answer 1

需要包括:

$(文档).foundation();

初始化 Foundation javascript 以便粘性导航正常工作。