メインコンテンツへスキップ

ドキュメント

スティッキー

要素を、スティッキーナビゲーションのように、ビューポートの上部に固定します。

使い方

サイトを下にスクロールする際に、ビューポートの上部に固定される要素を作成するには、その要素にuk-sticky属性を追加します。

<div uk-sticky></div>
  • 上部に固定
  • <div class="uk-background-muted uk-height-large">
    <div class="uk-card uk-card-default uk-card-body uk-text-center uk-position-z-index" uk-sticky="end: !.uk-height-large; offset: 80">Stick to the top</div>
</div>

注意このページの要素例は、次の見出しまでスクロールすると固定が解除され、その後は表示されません。これは、スティッキーコンテナのすべてのバリエーションで画面が乱雑になるのを防ぐためです。

位置

デフォルトでは、要素はビューポートの上部に固定されます。position: bottomオプションを設定すると、ビューポートの下部に固定できます。

<div uk-sticky="position: bottom"></div>
  • 下部に固定
  • <div class="uk-background-muted uk-height-large">
    <div class="uk-card uk-card-default uk-card-body uk-text-center uk-position-z-index" uk-sticky="position: bottom; end: !.uk-height-large">Stick to the bottom</div>
</div>

開始

要素をスティッキーにする開始位置にオフセットを適用するには、startオプションを追加します。値はvh、％、pxで指定できます。基本的な算術演算子+と-をサポートしています。デフォルト値の0は、要素の上端とビューポートの上端が交差することを意味します。CSSセレクターを使用すると、開始位置が選択した要素の下端と要素の上端に設定されます。

<!-- Sticks after 200px scrolling -->
<div uk-sticky="start: 200"></div>

<!-- Sticks after scrolling the elements height -->
<div uk-sticky="start: 100%"></div>

<!-- Sticks after 20vh scrolling -->
<div uk-sticky="start: 20vh"></div>

<!-- Sticks after the top of the selected element -->
<div id="my-id">
    <div uk-sticky="start: #my-id"></div>
</div>
  • 200px
    100%
    20vh
    セレクター
  • <div class="uk-background-muted uk-height-large">

    <div class="uk-child-width-1-4@s" uk-grid>
        <div>
            <div class="uk-card uk-card-default uk-card-body uk-text-center uk-position-z-index" uk-sticky="start: 200; end: !.uk-height-large; offset: 80">200px</div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body uk-text-center uk-position-z-index" uk-sticky="start: 100%; end: !.uk-height-large; offset: 80">100%</div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body uk-text-center uk-position-z-index" uk-sticky="start: 20vh; end: !.uk-height-large; offset: 80">20vh</div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body uk-text-center uk-position-z-index" uk-sticky="start: !.uk-height-large; end: !.uk-height-large + div; offset: 80">Selector</div>
        </div>
    </div>

</div>
<div style="height: 200px"></div>

終了

要素のスティッキーを解除する位置にオフセットを適用するには、stopオプションを追加します。値はvh、％、pxで指定できます。基本的な算術演算子+と-をサポートしています。値0は、要素の上端とビューポートの上端が交差することを意味し、開始位置も0に設定されている場合は、要素がまったくスティッキーにならなくなります。CSSセレクターを使用すると、終了位置が選択した要素の下端と要素の下端に設定されます。falseは、要素をページの最後まで固定します。trueは親要素を選択します。

<!-- Sticks until 200px scrolling -->
<div uk-sticky="end: 200"></div>

<!-- Sticks until scrolling the elements height -->
<div uk-sticky="end: 100%"></div>

<!-- Sticks until 20vh scrolling -->
<div uk-sticky="end: 20vh"></div>

<!-- Sticks until the bottom of the selected element -->
<div uk-sticky="end: #my-id"></div>
<div id="my-id"></div>

<!-- Sticks until the bottom of its parent container -->
<div>
    <div uk-sticky="end: true"></div>
</div>
  • 200px
    100%
    20vh
    セレクター
  • <div class="uk-background-muted uk-height-large">

    <div class="uk-child-width-1-4@s" uk-grid>
        <div>
            <div class="uk-card uk-card-default uk-card-body uk-text-center uk-position-z-index" uk-sticky="end: 200; offset: 80">200px</div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body uk-text-center uk-position-z-index" uk-sticky="end: 100%; offset: 80">100%</div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body uk-text-center uk-position-z-index" uk-sticky="end: 20vh; offset: 80">20vh</div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body uk-text-center uk-position-z-index" uk-sticky="end: !.uk-height-large; offset: 80">Selector</div>
        </div>
    </div>

</div>

オフセット

要素がスティッキーになっているときに、ビューポートの端へのオフセットを設定するには、offsetオプションを追加します。値はvh、％、pxで指定できます。基本的な算術演算子+と-をサポートしています。

<div uk-sticky="offset: 200"></div>
  • 上から200px下に固定
  • <div class="uk-background-muted uk-height-large">
    <div class="uk-card uk-card-default uk-card-body uk-text-center uk-position-z-index" uk-sticky="end: !.uk-height-large; offset: 200">Stick 200px below the top</div>
</div>

アニメーション

アニメーションコンポーネントからアニメーションを追加して、開始オフセットが設定されている場合に、スティッキー要素がスムーズに再表示されるようにします。

<div uk-sticky="start: 200; animation: uk-animation-slide-top"></div>
  • アニメーションスライドトップ
  • <div class="uk-background-muted uk-height-large">
    <div class="uk-card uk-card-default uk-card-body uk-text-center uk-position-z-index" uk-sticky="start: 200; end: !.uk-height-large; offset: 80; animation: uk-animation-slide-top">Animation Slide Top</div>
</div>

上にスクロール時のみ表示

スペースを節約するために、上にスクロールするときにのみスティッキー要素を表示できます。アニメーションと組み合わせることで、非常にスムーズなエクスペリエンスを実現できます。

<div uk-sticky="show-on-up: true"></div>
  • 上にスクロール時にスライドイン
  • <div class="uk-background-muted uk-height-large">
    <div class="uk-card uk-card-default uk-card-body uk-text-center uk-position-z-index" uk-sticky="end: !.uk-height-large; offset: 80; show-on-up: true; animation: uk-animation-slide-top">Slide in on scroll up</div>
</div>

レスポンシブ

属性にmediaオプションを追加し、適切なビューポート幅を追加することで、異なるデバイス幅でスティッキー動作を無効にできます。ピクセル単位で数値を指定します（例：media: 640）またはブレークポイントを指定します（例：media: @m）。要素は指定されたビューポート幅以上でスティッキーになりますが、それ以下ではスティッキーになりません。

<div uk-sticky="media: 640"></div>
  • 640pxより大きいビューポートでのみスティッキーにする。
  • <div class="uk-background-muted uk-height-large">
    <div class="uk-card uk-card-default uk-card-body uk-text-center uk-position-z-index" uk-sticky="end: !.uk-height-large; offset: 80; media: 640">Only be sticky on viewports larger than 640px.</div>
</div>

オーバーサイズコンテンツ

ビューポートよりも大きいスティッキーコンテンツは、下にスクロールしてビューポートの下部に固定されます。スクロール方向を変更すると、スティッキーコンテンツがすぐに上にスクロールし、スティッキー動作がビューポートの上部に固定されるように変わります。下にスクロールすると、動作が再び変わります。

  • スティッキー 1

    Lorem ipsum dolor sit amet, consectetur adipiscing 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.

    スティッキー 2

    Lorem ipsum dolor sit amet, consectetur adipiscing 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.

    スティッキー 3

    Lorem ipsum dolor sit amet, consectetur adipiscing 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.

    スティッキー 4

    Lorem ipsum dolor sit amet, consectetur adipiscing 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.

    スティッキー 5

    Lorem ipsum dolor sit amet, consectetur adipiscing 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.

    見出し 1

    Lorem ipsum dolor sit amet, consectetur adipiscing 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.

    見出し 2

    Lorem ipsum dolor sit amet, consectetur adipiscing 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.

    見出し 3

    Lorem ipsum dolor sit amet, consectetur adipiscing 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.

    見出し 4

    Lorem ipsum dolor sit amet, consectetur adipiscing 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.

    見出し 5

    Lorem ipsum dolor sit amet, consectetur adipiscing 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.

    見出し 6

    Lorem ipsum dolor sit amet, consectetur adipiscing 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.

    見出し 7

    Lorem ipsum dolor sit amet, consectetur adipiscing 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.

    見出し 8

    Lorem ipsum dolor sit amet, consectetur adipiscing 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.

  • <div id="js-oversized" class="uk-child-width-1-2" uk-grid>
    <div>

        <div class="uk-card uk-card-default uk-card-body uk-position-z-index" uk-sticky="end: #js-oversized; offset: 80">
       
            <h3>Sticky 1</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>

            <h3>Sticky 2</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>

            <h3>Sticky 3</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>

            <h3>Sticky 4</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>

            <h3>Sticky 5</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>
           
        </div>

    </div>
    <div>
        <div class="uk-background-muted uk-padding">

            <h3>Headline 1</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>

            <h3>Headline 2</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>

            <h3>Headline 3</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>

            <h3>Headline 4</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>

            <h3>Headline 5</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>

            <h3>Headline 6</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>

            <h3>Headline 7</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>

            <h3>Headline 8</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>

        </div>

    </div>
</div>

オーバーフロー反転

overflow-flipオプションは、オーバーサイズコンテンツのスティッキー動作を無効にします。代わりに、要素がビューポートよりも大きい場合にのみ、スティッキー位置を反転します。スクロール方向を変更しても、スティッキー位置には影響しません。startオプションとendオプションを組み合わせることで、2つの優れたスティッキー効果を実現できます。コンテンツを追跡して要素を覆うか、前のコンテンツで要素を表示します。

<!-- Section will be covered by the next section -->
<div uk-sticky="overflow-flip: true; end: 100%"></div>

<div>Some section.</div>

<!-- Section will be revealed by the previous section -->
<div uk-sticky="position: bottom; overflow-flip: true; start: -100%; end: 0"></div>
  • overflow-flip: true
    end: 100%
    前のセクションを覆う。
    次のセクションを表示。
    position: bottom
    overflow-flip: true
    start: -100%
    end: 0
  • <div class="uk-position-relative uk-position-z-index-zero">
    <div class="uk-background-primary uk-padding uk-flex uk-flex-center uk-flex-middle uk-text-center uk-light uk-height-medium uk-position-z-index-negative" uk-sticky="overflow-flip: true; end: 100%; offset: 80">
        overflow-flip: true<br>
        end: 100%
    </div>
    <div class="uk-background-muted uk-padding uk-flex uk-flex-center uk-flex-middle uk-text-center uk-height-medium">Cover previous section.<br>Reveal next section.</div>
    <div class="uk-background-primary uk-padding uk-flex uk-flex-center uk-flex-middle uk-text-center uk-light uk-height-medium uk-position-z-index-negative" uk-sticky="position: bottom; overflow-flip: true; start: -100%; end: 0">
        position: bottom<br>
        overflow-flip: true<br>
        start: -100%<br>
        end: 0
    </div>
</div>

コンポーネントオプション

これらのオプションはすべて、コンポーネント属性に適用できます。複数のオプションはセミコロンで区切ります。詳細はこちら

オプション 値 デフォルト 説明
position top、bottom top 要素を固定する位置。
start 長さ、CSSセレクター 0 開始オフセット。値はvh、％、pxで指定できます。基本的な算術演算子+と-をサポートしています。デフォルト値の0は、要素の上端とビューポートの上端が交差することを意味します。CSSセレクターを使用すると、開始位置が選択した要素の下端と要素の上端に設定されます。
end 長さ、CSSセレクター、ブール値 false 終了オフセット。値はvh、％、pxで指定できます。基本的な算術演算子+と-をサポートしています。値0は、要素の上端とビューポートの上端が交差することを意味し、開始位置も0に設定されている場合は、要素がまったくスティッキーにならなくなります。CSSセレクターを使用すると、終了位置が選択した要素の下端と要素の下端に設定されます。falseは、要素をページの最後まで固定します。trueは親要素を選択します。
offset 長さ 0 スティッキーを固定するオフセット。値はvh、％、pxで指定できます。基本的な算術演算子+と-をサポートしています。
overflow-flip ブール値 false 要素がビューポートからはみ出している場合、スティッキーの位置オプションを反転し、オーバーフロースクロールを無効にします。
animation 文字列 false 要素がスティッキーになったときに使用するアニメーション。
cls-active 文字列 uk-active アクティブなクラス。
cls-inactive 文字列 非アクティブなクラス。
show-on-up ブール値 false 上にスクロールするときにのみスティッキー要素を表示します。
media 数値、文字列 false アクティブステータスの条件 - 幅を整数（例：640）またはブレークポイント（例：@s、@m、@l、@xl）または有効なメディアクエリ（例：(min-width: 900px)）として指定します。
target-offset false、長さ false 最初は、ページのロケーションハッシュを介して参照される要素の上にスティッキー要素が表示されないようにします。オフセットは、要素が参照される要素の上にどれだけ離れているかによって定義されます。falseはこの動作を無効にします。

JavaScript

JavaScriptコンポーネントの詳細はこちら。

初期化

UIkit.sticky(element, options);

イベント

このコンポーネントがアタッチされた要素で次のイベントがトリガーされます

名前 説明
active 要素がスティッキーになった後に発生します。
inactive 要素がスティッキーでなくなった後に発生します。