粘性顶部导航栏基础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

需要包括：

$(document).foundation();

初始化Foundation javascript以使粘滞导航正常工作。