Foundation - 插件 Sticky JavaScript 参考
Foundation 为 Sticky 插件提供了 JavaScript 组件，如下所示。
初始化
您可以使用 foundation.sticky.js 和 foundation.core.js 插件在 JavaScript 中初始化 sticky。该插件需要以下库 −
foundation.util.triggers.js
foundation.util.mediaQuery.js
Foundation.Sticky
它指定 sticky 的实例，如下所示 −
var elem = new Foundation.Sticky(element);
| Sr.No. | 姓名 &描述 | 类型 |
|---|---|---|
| 1 |
Element 它将一个 jQuery 对象创建为粘性对象。 |
jQuery |
| 2 |
Options 默认插件设置是覆盖。 |
对象 |
插件选项
您可以使用以下插件自定义粘性实例。您可以将插件选项设置为单独的数据属性。
| Sr.No. | 名称 &描述 | 示例 |
|---|---|---|
| 1 |
container 对于样式和大小，可以包括自己的类。 |
' ' |
| 2 |
stickTo 设置元素必须粘贴的位置。 |
'top' |
| 3 |
anchor 包括该元素的 id，该元素锚定到单个元素。 |
'exampleId' |
| 4 |
topAnchor 如果使用更多元素作为锚点，则考虑顶部锚点 ID。 |
'exampleId:top' |
| 5 |
btmAnchor 如果使用更多元素作为锚点，则考虑底部锚点 ID。 |
'exampleId:bottom' |
| 6 |
marginTop 设置顶部元素变为粘性时的边距(单位:em)。 |
1 |
| 7 |
marginBottom 设置底部元素变为粘性时的边距(单位:em)。 |
1 |
| 8 |
stickyOn 断点字符串应变为粘性。 |
'medium' |
| 9 |
stickyClass 将类应用于粘性元素并在销毁时移除。 |
'sticky' |
| 11 |
containerClass 将类应用于粘性容器。默认情况下，它是sticky-container。 |
'sticky-container' |
| 12 |
checkEvery 粘性点通过插件之间的滚动事件数量重新计算。 |
50 |
事件
附加到任何元素的粘性插件都可以触发以下事件。
| Sr.No. | 名称和描述 |
|---|---|
| 1 |
stuckto.zf.sticky 当 $element 变为 position: fixed; 且命名空间为 top 或 bottom 时，会触发事件。 |
| 2 |
unstuckfrom.zf.sticky 当 $element 已锚定且命名空间为 top 或 bottom 时，会触发事件。 |
函数
以下是粘性。
._pauseListeners
对于滚动事件，处理程序被删除，事件变为锚点。
| Sr.No. | 名称和描述 | 类型 |
|---|---|---|
| 1 |
scrollListener 窗口附加了唯一的命名空间滚动侦听器。 |
string |
._calc
在每个 scroll 事件中，都会调用 calc，并且根据缓存和布尔值，_init 会触发函数。
| Sr.No. | 名称 &描述 | 类型 |
|---|---|---|
| 1 |
checkSizes 如果设置为 true，插件将重新计算大小和断点。 |
Boolean |
| 2 |
scroll 滚动从 cb 函数传递的事件的当前位置。否则，默认情况下设置为 window.pageYOffset |
Number |
.destroy
当前粘性元素被销毁；元素被重置到顶部位置。它会删除 JS，包括类和 css 属性，并且当 JS 包含 $container 时，$element 会被解包。
.emCalc
辅助函数用于计算 em 值。
| Sr.No. | 名称和说明 | 类型 |
|---|---|---|
| 1 |
数字 em 数以像素为单位计算。 |
em |
foundation_plugins.html
