Question

我正在尝试实现粘性功能，详见此处：http://foundation.zurb.com/sites/docs/sticky.html

我已根据说明添加了必需的属性。我的HTML是：

<div class="columns medium-4 medium-push-8" data-sticky-container>
  <div class="sticky" data-sticky data-margin-top="0" >
    <!--content-->
   </div>
</div>

我已确保Zurb的JavaScript库正常运行。

当我查看页面时，元素看起来很好并且按顺序排列，但Sticky函数不起作用。

有人知道我做错了吗？

Answer 1

您的代码适合我。我知道你提到“Zurb的JavaScript库正在运行”。但是，您是否包含一整套Foundation库，或者它是自定义构建吗？您需要确保包含以下内容：

foundation.sticky.js
foundation.core.js
foundation.util.triggers.js
foundation.util.mediaQuery.js
foundation-sticky mixin

Answer 2

这个直接来自6.3文档的片段对我有用。

<div class="columns small-6 right" data-sticky-container>
  <div class="sticky" data-sticky data-margin-top="0">
    <img class="thumbnail" src="assets/img/generic/rectangle-3.jpg">
    <!-- This sticky element would stick to the window, with a marginTop of 0 -->
  </div>
</div>

如果这对您不起作用，可能是因为您没有包含正确的javascript。大多数时候使用缩小的foundation.min.js可以节省很多问题，因为它包含了所有插件。

Zurb Foundation Sticky功能无响应

2 个答案: