插件粘性 JavaScript 参考

上一个
下一个

Foundation 提供了如下所列的用于粘性插件的 JavaScript 组件。

初始化

您可以使用 foundation.sticky.js 和 foundation.core.js 插件在 JavaScript 中初始化粘性。该插件需要以下库：

  • foundation.util.triggers.js

  • foundation.util.mediaQuery.js

Foundation.Sticky

它指定了如下定义的粘性实例：

var elem = new Foundation.Sticky(element);

序号 名称和描述 类型
1

元素

它将 jQuery 对象创建为粘性。

 jQuery
2

选项

覆盖默认插件设置。

 对象

插件选项

您可以使用以下插件来自定义粘性实例。您可以将插件选项设置为单独的数据属性。

序号 名称和描述 示例
1

容器

为了进行样式设置和大小调整，可以包含自己的类。

 ' '
2

粘贴到

设置元素需要粘贴到的位置。

 '顶部'
3

锚点

包含该元素的 id，该元素锚定到单个元素。

 'exampleId'
4

顶部锚点

如果使用多个元素作为锚点，则考虑顶部锚点 id。

 'exampleId:top'
5

底部锚点

如果使用多个元素作为锚点，则考虑底部锚点 id。

 'exampleId:bottom'
6

上边距

设置元素变为粘性时顶部的 em 单位边距。

 1
7

下边距

设置元素变为粘性时底部的 em 单位边距。

 1
8

粘性开启

应变为粘性的断点字符串。

 '中等'
9

粘性类

将类应用于粘性元素，并在销毁时删除。

 '粘性'
11

容器类

将类应用于粘性容器。默认情况下，它是 sticky-container。

 'sticky-container'
12

每隔检查

插件之间滚动事件的数量重新计算粘性点。

 50

事件

附加到任何元素的粘性插件可以触发以下事件。

序号 名称和描述
1

stuckto.zf.sticky

当 $element 变为 position: fixed; 时触发事件，并命名空间到 顶部 或 底部。
2

unstuckfrom.zf.sticky

当 $element 变为锚定状态时触发事件，并命名空间到 顶部 或 底部。

功能

以下是粘性中使用的函数。

._pauseListeners

对于滚动事件，删除处理程序并将事件更改为锚点。

序号 名称和描述 类型
1

scrollListener

窗口附加了唯一的命名空间滚动侦听器。

 字符串

._calc

在每个 scroll 事件中，都会调用 calc，并根据缓存和布尔值，_init 会触发函数。

序号 名称和描述 类型
1

checkSizes

如果设置为 true，则插件会重新计算大小和断点。

 布尔值
2

滚动

滚动事件的当前位置，该位置从 cb 函数传递。否则，默认情况下将其设置为 window.pageYOffset

 数字

.destroy

销毁当前粘性元素；元素重置为顶部位置。它删除了 JS，包括类和 css 属性，并且当 JS 包括 $container 时，$element 会被解包。

.emCalc

辅助函数用于计算 em 值。

序号 名称和描述 类型
1

数字

以像素计算的 em 数。

 em
foundation_plugins.htm
打印页面
上一个
下一个
广告

© . All rights reserved.