Sticky

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);

名稱	類型	說明
`element`	jQuery	要固定的 jQuery 物件。
`options`	物件	以程式方式建立元素時傳遞的選項物件。

外掛程式選項

使用這些選項自訂 Sticky 的實例。外掛程式選項可以設定為個別的資料屬性，一個結合的 data-options 屬性，或作為傳遞給外掛程式建構函式的物件。深入了解 JavaScript 外掛程式的初始化方式。

名稱	類型	預設值	說明
`data-container`	`字串`	`&lt;div data-sticky-container&gt;&lt;/div&gt;`	可自訂的容器範本。加入自己的類別以調整樣式和大小。
`data-stick-to`	`字串`	`top`	元素固定在檢視中的位置。可以是「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`	`字串`	`medium`	中斷點字串，表示元素應變為固定的最小螢幕大小。
`data-sticky-class`	`字串`	`sticky`	套用於固定元素的類別，並在銷毀時移除。Foundation 預設為「sticky」。
`data-container-class`	`字串`	`sticky-container`	套用於黏著容器的類別。Foundation 預設為 `sticky-container`。
`data-dynamic-height`	`布林值`	`true`	如果為 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 數

基礎

進階