1ページあたり1つの小さな広告しか表示しないことをお約束します。ご心配なく、このメッセージを非表示にすれば、二度と催促されることはありません。
概要
スティッキーコンテンツは、ページの別のコンテンツ列が表示されている間、ブラウザのビューポートに固定されたままになります。
スティッキーコンテンツは任意のコンテナ内で使用できますが、スティッキーはui railとの相性が良いです。なぜなら、「固定された」コンテンツは、Webサイトのメインコンテンツの外側の追加のキャンバススペースを占有するために使用されることが多く、フォローアップリンク、広告、その他の補助コンテンツがサイトのメインコンテンツを操作している間も画面に表示されるようにするためです。
例
隣接するコンテキストへのスティック
スティッキーコンテンツは、通過するとビューポートにアタッチされ、この固定コンテンツが渡されたcontextの下端と衝突するまで、ビューポートに固定されたままになります。追加の静的コンテンツは、stickyコンテンツの上に存在しても、その位置に影響を与えません。
$('.ui.sticky') .sticky({ context: '#example1' }) ;
固定されたコンテンツ
固定されたコンテンツ
プッシュ
pushing: trueを指定すると、スクロール方向に応じて、ビューポートがスティッキーコンテンツを「プッシュ」します。下にスクロールするとコンテンツはビューポートの上部に固定されますが、反対方向ではコンテンツはビューポートの下部に固定されます。
$('.ui.sticky') .sticky({ context: '#example2', pushing: true }) ;
固定されたコンテンツ
固定されたコンテンツ
オーバーサイズのコンテンツ
ビューポートよりも大きいスティッキーコンテンツは、コンテキストとは独立して自動的にスクロールし、いつでもスクロール方向をシフトすると、固定されたコンテンツのスクロール位置もすぐに調整されます。
この動作により、ユーザーはスティッキー要素内で画面に収まらないコンテンツを表示するために、コンテキスト要素の一番上まで移動する必要がなくなります。
$('.ui.sticky') .sticky({ context: '#example3' }) ;
自身のコンテキストへのスティック
指定されたコンテキストのないスティッキーコンテンツは、自身の現在のコンテキストにも固定できますが、これによりコンテンツとのオーバーラップの問題が発生する可能性があります。
自身のコンテキストに固定されたコンテンツは、「固定された」ときに自身のレイアウトを調整します。ui fixed stickyの次の要素にスタイルを追加することで、このリフローによって引き起こされるレイアウトの問題を修正できます。
.ui.fixed.sticky + p { margin-top: 39px; }
$('.ui.sticky') .sticky() ;
使い方
初期化
スティッキーは、ビューポートに固定される必要があるコンテンツで初期化されます。ほとんどのインスタンスでは、スティッキー要素の上限と下限を定義する2次contextを指定する必要があります。スティッキーコンテンツは、コンテナ要素内に含める必要があります。このコンテナはui railまたは独自の任意コンテナにすることができますが、コンテキストと並行して存在する必要があります。
$('.ui.sticky') .sticky({ context: '#context' }) ;
キャッシュされた値の更新
スティッキーコンテンツは、初期化時にページ上の現在のオフセットとその他の重要な値をキャッシュします。これにより、ブラウザのスクロールごとにDOMをクエリする必要がなくなり、パフォーマンスが大幅に低下するのを防ぎます。
スティッキーは、ミューテーションオブザーバーを使用して、コンテンツがコンテキストに追加されたときにその位置を調整し、ブラウザのresizeでも自動的に再計算しますが、要素のコンテキストを調整するページへのその他の変更では、スティッキーの位置を更新する必要があります。
スティッキー要素に影響を与える可能性のある変更の例は次のとおりです。
サイズが指定されていない画像の読み込み
ページのレイアウトを調整するCSSの設定
Javascriptを使用した要素の非表示
キャッシュされた値を更新するには、refreshビヘイビアを呼び出すだけです。
// オフセットを再計算する $('.ui.sticky') .sticky('refresh') ;
スティッキーの条件
スティッキーコンテンツは、スティッキーコンテキストであるか、コンテキスト要素と垂直方向の位置を共有する独自のposition: relativeコンテナ内にある必要があります。
同じ行にあるui railまたはui grid列、または独自のカスタムCSSを使用して、このセットアップを提供できます。
スティッキー要素は、コンテナの端にバインドされるか、ブラウザのビューポートの端に固定されるかを選択できます。
| クラス | 説明 | |
|---|---|---|
| 上部に固定 | ui fixed top sticky | 要素がビューポートの上部に固定されます |
| 下部に固定 | ui fixed bottom sticky | 要素がビューポートの下部に固定されます |
| 上部にバインド | ui bound top sticky | 要素が、その包含要素（通常はレールまたは列）の上部にバインドされます |
| 下部にバインド | ui bound bottom sticky | 要素が、その包含要素（通常はレールまたは列）の下部にバインドされます |
オフセットとパディングの調整
コンテンツをビューポートに固定している場合、上部または下部のオフセットを含めることが理にかなっているかもしれません。offset は、ブラウザの上部と指定された値の間にコンテンツが重ならないように、すべての値を調整します。bottomOffset は、ビューポートの下部に固定されたコンテンツに対して同じ処理を行います。
$('.ui.sticky') .sticky({ offset : 50, bottomOffset : 50, context : '#element-to-follow' }) ;
Sticky の設定Sticky の動作を構成するための設定
| 設定 | デフォルト | 説明 |
|---|---|---|
| pushing | false | スクロールアップ時に画面の下部にアタッチし、要素をビューポートによって「プッシュ」するかどうか |
| setSize | true 2.2.11 で新規追加 |
fixed コンテンツのサイズを、画面に固定する前に動的にその幅に合わせるように設定します。これは、fixed がブロック表示または100%幅のコンテンツを固定前に表示されるのとは異なる方法で表示する可能性があるためです。 |
| jitter | 5 | スティッキーコンテナの高さは、コンテナとコンテキストの高さの差がこのジッター値よりも大きい場合にのみ設定されます。 |
| observeChanges | false | context DOM の変更によって、キャッシュされたスティッキー位置が自動的に更新されるかどうか |
| context | false | スティッキー要素がスティックするコンテキスト |
| scrollContext | window | スティッキーが onscroll イベントをアタッチするコンテキスト。 |
| offset | 0 | 要素をビューポートに固定する際の、画面上部からのピクセル単位のオフセット |
| bottomOffset | 0 | 要素をビューポートに固定する際の、画面下部からのピクセル単位のオフセット |
コールバック
コールバックは、特定の動作の後に実行される関数を指定します。
| コンテキスト | 説明 | |
|---|---|---|
| onReposition | $module | レイアウトの変更によって要素の位置が変更されたときのコールバック |
| onScroll | $module | スクロールハンドラから requestAnimationFrame が発火したときのコールバック。 |
| onStick | $module | 要素がページに固定されたときのコールバック |
| onUnstick | $module | 要素がページから固定解除されたときのコールバック |
| onTop | $module | 要素が親コンテナの上部にバインドされたときのコールバック |
| onBottom | $module | 要素が親コンテナの下部にバインドされたときのコールバック |
DOM の設定DOM の設定では、このモジュールが DOM とどのようにインターフェイスを取るかを指定します。
| 設定 | デフォルト | 説明 |
|---|---|---|
| namespace | sticky | イベント名前空間。モジュールの破棄が要素にアタッチされた他のイベントに影響を与えないようにします。 |
| className |
className : { bound : 'bound', fixed : 'fixed', supported : 'native', top : 'top', bottom : 'bottom' }
|
状態にスタイルをアタッチするために使用されるクラス名 |
デバッグの設定デバッグ設定は、コンソールへのデバッグ出力を制御します。
| 設定 | デフォルト | 説明 |
|---|---|---|
| name | スティッキー | デバッグログで使用される名前 |
| silent | False | 他のデバッグ設定に関係なく、エラーメッセージを含むすべてのコンソール出力を抑制します。 |
| debug | False | コンソールに標準のデバッグ出力を提供します |
| performance | True | コンソールに標準のデバッグ出力を提供します |
| verbose | True | コンソールに補助的なデバッグ出力を提供します |
| errors |
error : { container : 'スティッキー要素は相対コンテナの内側にある必要があります', visible : '要素が非表示になっています。要素が表示された後でリフレッシュを呼び出す必要があります', method : '呼び出したメソッドは定義されていません', invalidContext : '指定されたコンテキストは存在しません', elementSize : 'スティッキー要素がコンテナよりも大きいため、スティッキーを作成できません。' }
|
|