跳至主要內容

文件

捲軸偵測

在捲動頁面時觸發事件和動畫。

用法

Scrollspy 元件會監聽頁面捲動，並根據捲動位置觸發事件。例如，如果您向下捲動頁面，並且某個元素第一次出現在視窗中，您可以觸發平滑動畫來淡入該元素。只需新增 uk-scrollspy 屬性，該屬性會採用以下選項。

通常，動畫元件的類別會與 Scrollspy 元件一起使用。

<div uk-scrollspy="cls:uk-animation-fade"></div>

左

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

右

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<div class="uk-child-width-1-2@m uk-grid-match" uk-grid>
    <div>
        <div class="uk-card uk-card-default uk-card-body" uk-scrollspy="cls: uk-animation-slide-left; repeat: true">
            <h3 class="uk-card-title">Left</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body" uk-scrollspy="cls: uk-animation-slide-right; repeat: true">
            <h3 class="uk-card-title">Right</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
</div>

此範例使用 repeat: true 選項。上下捲動以查看觸發的動畫。版面配置是使用 卡片元件 製作的。

群組

您也可以將 scrollspy 元素分組，這樣您就不必將屬性套用至每個元素。只需將 uk-scrollspy="target: SELECTOR" 屬性新增至容器元素，即可針對您想要在容器內動畫化的項目選擇器。當使用延遲時，它會累計套用至捲動進入檢視的項目。

<div uk-scrollspy="target: > div; cls: uk-animation-fade; delay: 500">
    <div></div>
    <div></div>
</div>

淡入

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

淡入

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

淡入

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

淡入

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

淡入

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

淡入

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<div class="uk-child-width-1-3@m" uk-grid uk-scrollspy="cls: uk-animation-fade; target: .uk-card; delay: 500; repeat: true">
    <div>
        <div class="uk-card uk-card-default uk-card-body">
            <h3 class="uk-card-title">Fade</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">
            <h3 class="uk-card-title">Fade</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">
            <h3 class="uk-card-title">Fade</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">
            <h3 class="uk-card-title">Fade</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">
            <h3 class="uk-card-title">Fade</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">
            <h3 class="uk-card-title">Fade</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
</div>

設定每個目標的 `cls` 選項

您也可以為每個目標提供單獨的 cls 選項。只需將 uk-scrollspy-class="CLASS" 屬性新增至目標元素。它會覆寫在元件上設定的 cls 選項。

<div uk-scrollspy="target: > div; cls: uk-animation-fade; delay: 500">
    <div uk-scrollspy-class="uk-animation-slide-top"></div>
    <div uk-scrollspy-class="uk-animation-slide-bottom"></div>
</div>

底部

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

頂部

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

底部

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<div class="uk-child-width-1-3@m" uk-grid uk-scrollspy="cls: uk-animation-slide-bottom; target: .uk-card; delay: 300; repeat: true">
    <div>
        <div class="uk-card uk-card-default uk-card-body">
            <h3 class="uk-card-title">Bottom</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body" uk-scrollspy-class="uk-animation-slide-top">
            <h3 class="uk-card-title">Top</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">
            <h3 class="uk-card-title">Bottom</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
</div>

元件選項

這些選項中的任何一個都可以套用至元件屬性。以分號分隔多個選項。瞭解更多

選項 值 預設值 描述
cls 字串 當元素進入/離開視窗時切換的類別。
target 布林值、CSS 選擇器 false 套用捲軸偵測的目標。預設為元素本身。
hidden 布林值 true 在視窗外時隱藏元素。
margin 字串 -1px 邊距會新增至視窗的邊界方塊，然後再計算與元素的交集。值必須以 px 或 % 單位表示。
repeat 布林值 false 每次元素處於檢視時都套用 cls 類別。
delay 數字 0 延遲時間，以毫秒為單位。

cls 是主要選項，如果它是屬性值中唯一的選項，則可以省略其鍵。

<span uk-scrollspy="my-class"></span>

JavaScript

深入瞭解JavaScript 元件。

初始化

UIkit.scrollspy(element, options);

事件

下列事件將在附加此元件的元素上觸發

名稱 描述
inview 在項目移動到視窗後觸發。
outview 在項目移動到視窗外後觸發。

Scrollspy 導覽

若要根據您網站的捲動位置自動更新使用中的選單項目，請將 uk-scrollspy-nav 屬性新增至任何導覽。每個選單項目都必須連結到網站上對應部分的 ID。

<ul class="uk-nav uk-nav-default" uk-scrollspy-nav="closest: li; scroll: true">
    <li><a href=""></a></li>
    <li><a href=""></a></li>
</ul>

如需 scrollspy 導覽的範例，只需查看此頁面右側的固定導覽，或查看測試即可。下列任何選項都可以套用至 uk-scrollspy-nav 屬性。以分號分隔多個選項。

Scrollspy 導覽選項

這些選項中的任何一個都可以套用至元件屬性。以分號分隔多個選項。瞭解更多

選項 值 預設值 描述
cls 字串 uk-active 要新增至使用中連結的類別。
closest 布林值、CSS 選擇器 false 要將類別套用至的目標。預設為元素本身。
scroll 布林值 false 將捲動元件新增至其連結。
target CSS 選擇器 a[href] 鎖定應該使用的錨點元素。
offset 數字 0 新增至捲動頂部的偏移。

Scrollspy 導覽 JavaScript

深入瞭解JavaScript 元件。

Scrollspy 導覽初始化

UIkit.scrollspyNav(element, options);

Scrollspy 導覽事件

下列事件將在附加此元件的元素上觸發

名稱 描述
active 在項目變成使用中後觸發。