JavaScript Reference
Foundation为Sticky插件提供JavaScript组件，如下所示。
初始化 (Initializing)
您可以使用foundation.sticky.js和foundation.core.js插件在JavaScript中初始化sticky。 该插件需要以下库 -
foundation.util.triggers.js
foundation.util.mediaQuery.js
Foundation.Sticky
它指定粘性的实例，如下所定义 -
var elem = new Foundation.Sticky(element);
| Sr.No. | 名称和描述 | 类型 |
|---|---|---|
| 1 | element 它将jQuery对象创建为sticky。 | jQuery |
| 2 | options 默认插件设置为覆盖。 | Object |
插件选项 (Plugin 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元素并在销毁时删除。 | 'sticky' |
| 11 | containerClass 将类应用于粘性容器。 默认情况下，它是sticky-container 。 | 'sticky-container' |
| 12 | checkEvery 通过插件之间的滚动事件的数量来重新计算粘滞点。 | 50 |
事件 (Events)
附加到任何元素的粘性插件可以触发以下事件。
| Sr.No. | 名称和描述 |
|---|---|
| 1 | stuckto.zf.sticky 当$ element成为position: fixed;时，它触发一个事件position: fixed; 和Namespaced到top或bottom 。 |
| 2 | unstuckfrom.zf.sticky 当$元素已锚定并且命名空间为top或bottom时，它会触发一个事件。 |
功能 (Functions)
以下是sticky中使用的函数。
._pauseListeners
对于滚动事件，将删除处理程序并将事件更改为锚点。
| Sr.No. | 名称和描述 | 类型 |
|---|---|---|
| 1 | scrollListener Window附加了唯一的命名空间滚动侦听器。 | 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 | Number 以像素计算ems的数量。 | em |