外掛粘性 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.