Bootstrap Affix Plugin（Advanced）

接辞プラグイン

Affixプラグインを使用すると、要素をページ上の領域に固定（ロック）することができます。これは、ナビゲーションメニューやソーシャルアイコンボタンでよく使用され、ページを上下にスクロールしながら特定の領域に「固定」されます。

プラグインは、スクロール位置に応じて、この動作のオンとオフを切り替えます（の値を CSS positionからstaticに変更します）。fixed

例1）添付されたナビゲーションバー：

例2）貼り付けられたサイドバー：

Affixを使用すると、ページを上下にスクロールすると、メニューが常に表示され、その位置にロックされます。

添付のナビゲーションメニューを作成する方法

次の例は、水平方向に固定されたナビゲーションメニューを作成する方法を示しています。

次の例は、垂直方向に固定されたナビゲーションメニューを作成する方法を示しています。

例の説明

data-spy="affix"貼り付けたい要素に追加します。

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

使い方

affixプラグインは、、、および の3つ.affixのクラスを切り替えます。各クラスは特定の状態を表します。クラスを除い て、実際の位置を処理するためにCSSプロパティを追加する必要があります。.affix-top.affix-bottomposition:fixed.affix

• .affix-topプラグインはまたはクラスを追加して.affix-bottom、要素が最上部または最下部の位置にあることを示します。この時点では、CSSを使用したポジショニングは必要ありません。


• 接辞要素を超えてスクロールすると、実際の接辞がトリガーされます-これは、プラグインが.affix-topor.affix-bottomクラスを.affixクラス（sets position:fixed）に置き換える場所です。この時点で、CSStopまたはbottomプロパティを追加して、ページに添付された要素を配置する必要があります。


• .affix下部オフセットが定義されている場合、それを超えてスクロールすると、クラスが。に置き換えられ.affix-bottomます。オフセットはオプションであるため、オフセットを設定するには、適切なCSSを設定する必要があります。この場合、position:absolute必要に応じて追加してください。

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

Scrollspy＆Affix

Scrollspyプラグインと一緒にAffixプラグインを使用する ：

完全なブートストラップ接辞リファレンス

すべての接辞メソッドとイベントの完全なリファレンスについては、 BootstrapJS接辞リファレンスにアクセスしてください。