Bootstrap Affix プラグイン (Advanced)

Affix プラグイン

Affix プラグインは、要素をページの領域に貼りついた（ロックした）ようにすることを可能にします。 多くの場合、ナビゲーションメニューやソーシャルアイコンボタン[注1]を、 ページの上下にスクロールする間も特定の領域に「貼り付ける」ために使用します。

[注1] ソーシャルボタンとは、SNS などのソーシャルメディアにおいて、外部のWebサイトやブログと連携し、 外部のページの情報をソーシャルメディア内で共有できるようにする機能のこと、およびそのために設置されるボタンの総称である。

プラグインは、スクロール位置に応じてこの動作のオン・オフ（code class="w3-codespan">CSS position の値を static から fixed への変更）を切り替えます。

例 1) An affixed navbar:

例 2) An affixed sidebar:

Affix によって、ページを上下にスクロールしても、メニューは常に表示されていると共にその位置に固定されています。

Affix ナビゲーションメニューの作成方法

次の例は、横型の affix ナビゲーションメニューの作成方法を示しています：

次の例は、縦型の affix ナビゲーションメニューの作成方法を示しています：

例の説明

affix したい要素に data-spy="affix" を追加します。

必要に応じて、スクロールする位置を計算するために data-offset-top|bottom 属性を追加します。

どのように動作するか

affix プラグインは、次の 3 つのクラス間をトグルします：.affix、.affix-top、 .affix-bottom。各クラスは、特定の状態を表します。 .affix クラスの position:fixed を除き、 実際の位置を処理するための CSS プロパティを追加する必要があります。

• プラグインは、要素が一番上の位置にあるのか、または一番下の位置にあるのかを表すために、.affix-top か .affix-bottom クラスを追加します。 CSS による位置決めは、この時点では必要ありません。


• affix 要素を越えてスクロールすると、実際の affix がトリガされます - これは、プラグインが .affix-top または .affix-bottom クラスを .affix（position:fixed に設定する）クラスに置き換える位置です。 このポイントで、ページ内 affix 要素の position へ CSS top または bottom プロパティを 追加しなければなりません。


• bottom offset が定義されている場合、それを過ぎてスクロールすると .affix クラスを .affix-bottom に置き換えます。offset はオプションなので、1つでも設定すると、 適切に CSS を設定する必要があります。この場合は、position:absolute を追加します。

上の最初の例は、上から 197 ピクセルをスクロールしたときに、.affix クラス（position:fixed）を <nav> 要素に追加します。 例を開いてみれば、値が 0 の CSS top プロパティを .affix クラスに追加していることがわかります。 これは、上から 197 ピクセルをスクロールしたときに、ナビゲーションバーが常に、ページの上部にとどまるようにするためです。

Scrollspy & Affix

Affix プラグインは、Scrollspy プラグインと一緒に使用します：

完全な Bootstrap Affix リファレンス

すべての affix メソッドとイベントの完全なリファレンスは、 Bootstrap JS Affix リファレンスをご覧ください。