粘性

JavaScript

几乎可以粘贴任何东西，任何你喜欢的地方！

基础知识

将 .sticky 类和 [data-sticky] 添加到元素以创建粘性元素。粘性元素必须包含在一个容器中，该容器将使用 [data-sticky-container] 确定其大小和网格布局。

<div class="cell 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>

<div class="cell small-6 right" data-sticky-container>
  <div class="sticky" data-sticky data-anchor="foo">
    <img class="thumbnail" src="assets/img/generic/rectangle-3.jpg">
    <!-- This sticky element would stick to the window for the height of the element #foo, with a 1em marginTop -->
  </div>
</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

高级

如果您愿意，您也可以使用两个锚点。使用 data-top-anchor="idOfSomething"、data-btm-anchor="idOfSomething:[top/bottom]" 或一组像素数 data-top-anchor="150"。如果您使用没有指定顶部/底部的元素 ID，则默认为顶部。

在视频中观看此部分

<div class="cell small-6 right" data-sticky-container>
  <div class="sticky" data-sticky data-top-anchor="example2:top" data-btm-anchor="foo:bottom">
    <img class="thumbnail" src="assets/img/generic/rectangle-5.jpg">
  </div>
</div>

当右边的图像到达此段落元素的顶部时，它将变得粘滞。 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

当右边的图像到达此段落元素的底部时，它将失去粘性。 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

粘贴到底部

您也可以粘贴到底部。使用 data-stick-to="bottom"。下面是一个使用两个锚点（如上所示）并粘贴到底部的示例。

<div class="cell small-6 right" data-sticky-container>
  <div class="sticky" data-sticky data-stick-to="bottom" data-top-anchor="example3" data-btm-anchor="foo2:top">
    <img class="thumbnail" src="assets/img/generic/rectangle-5.jpg">
  </div>
</div>

当右边的图像到达此段落元素的顶部时，它将失去粘性。 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

有时您想要一个粘性的导航栏或侧边栏，这非常简单，但确实需要从 Foundation 5 的 sticky 类添加到顶部栏的额外步骤。制作粘性导航栏的最低要求如下，您可以将 .title-bar 替换为另一个菜单组件。请注意样式 width:100%，您可以在内联或样式表中执行此操作。

<div data-sticky-container>
  <div class="title-bar" data-sticky data-options="marginTop:0;" style="width:100%">
    <div class="title-bar-left"><!-- Content --></div>
    <div class="title-bar-right"><!-- Content --></div>
  </div>
</div>

使用上面的最低标记，您的导航栏将在整个页面上保持粘性。您可以通过使用锚点来改变这一点，使其在页面上的重要标记处粘贴和断开。顶部锚点“1”将使其粘贴在页面顶部，底部锚点 content:bottom 将使其在 #content 元素的底部断开。如果您想要一个粘性的导航元素，但不需要整个页面的长度，这将非常有用。

<div data-sticky-container>
  <div class="title-bar" data-sticky data-options="marginTop:0;" style="width:100%" data-top-anchor="1" data-btm-anchor="content:bottom">
    <div class="title-bar-left"><!-- Content --></div>
    <div class="title-bar-right"><!-- Content --></div>
  </div>
</div>

JavaScript 参考

初始化

要使用此插件，必须在 JavaScript 中包含以下文件

foundation.core.js
foundation.sticky.js
- 使用实用程序库 foundation.util.triggers.js
- 使用实用程序库 foundation.util.mediaQuery.js

Foundation.Sticky

创建一个新的粘性事物实例。

var elem = new Foundation.Sticky(element, options);

名称	类型	描述
`元素`	jQuery	要使其粘贴的 jQuery 对象。
`选项`	对象	以编程方式创建元素时传递的选项对象。

插件选项

使用这些选项来自定义 Sticky 的实例。插件选项可以设置为单个数据属性、一个组合的 data-options 属性或作为传递给插件构造函数的对象。详细了解如何初始化 JavaScript 插件。

名称	类型	默认	描述
`data-container`	`字符串`	`&lt;div data-sticky-container&gt;&lt;/div&gt;`	可自定义的容器模板。添加您自己的类以进行样式设置和大小调整。
`data-stick-to`	`字符串`	`顶部`	元素粘贴到的视图中的位置。可以是 `'top'` 或 `'bottom'`。
`data-anchor`	`字符串`	`''`	如果锚定到单个元素，则为该元素的 ID。
`data-top-anchor`	`字符串`	`''`	如果使用多个元素作为锚点，则为顶部锚点的 ID。
`data-btm-anchor`	`字符串`	`''`	如果使用多个元素作为锚点，则为底部锚点的 ID。
`data-margin-top`	`数字`	`1`	元素变为粘性时应用于元素顶部的边距（以 `em` 为单位）。
`data-margin-bottom`	`数字`	`1`	元素变为粘性时应用于元素底部的边距（以 `em` 为单位）。
`data-sticky-on`	`字符串`	`中等`	断点字符串，它是元素应变为粘性的最小屏幕尺寸。
`data-sticky-class`	`字符串`	`粘性`	应用于粘性元素的类，并在销毁时删除。Foundation 默认为 `sticky`。
`data-container-class`	`字符串`	`sticky-container`	应用于粘性容器的类。Foundation 默认为 `sticky-container`。
`data-dynamic-height`	`布尔值`	`真`	如果为 true（默认），则保持粘性容器与元素的高度相同。否则，容器高度设置一次后不会更改。
`data-check-every`	`数字`	`-1`	插件重新计算粘性点之间的滚动事件数。将其设置为 `0` 将导致它在每个滚动事件上重新计算，将其设置为 `-1` 将阻止在滚动时重新计算。

方法

_pauseListeners

$('#element').foundation('_pauseListeners', scrollListener);

删除锚点上滚动和更改事件的事件处理程序。

触发以下事件： Sticky#event:pause

名称	类型	描述
`scrollListener`	字符串	附加到 `window` 的唯一命名空间滚动侦听器

_calc

$('#element').foundation('_calc', checkSizes, scroll);

在每次 scroll 事件和 _init 上调用，根据布尔值和缓存值触发函数

名称	类型	描述
`checkSizes`	布尔值	如果插件应重新计算大小和断点，则为 true。
`滚动`	数字	从 scroll 事件 cb 函数传递的当前滚动位置。如果未传递，则默认为 `window.pageYOffset`。

_destroy

$('#element').foundation('_destroy');

销毁当前的粘性元素。首先将元素重置到顶部位置。删除事件侦听器、JS 添加的 css 属性和类，如果 JS 添加了 $container，则解包 $element。

emCalc

$('#element').foundation('emCalc', Number);

用于计算 em 值的辅助函数

名称	类型	描述
`数字`	em	要计算为像素的 em 数