Bootstrap Affix Plugin (Advanced)

接辞プラグイン

接辞のプラグインは、要素がページ上の領域に固定された（ロック）になることができます。 これは、多くの場合、それらを作るために、ナビゲーションメニューや社会的なアイコンボタンで使用される"stick"までスクロールしながら特定の領域で、ページダウン。

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

例1）貼り付けられたナビゲーションバー：

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

我々はスクロールアップ、ページダウン接辞と、メニューは常に表示し、その位置でロックされています。

固定されたナビゲーションメニューを作成する方法

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

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

例の説明しました

追加data-spy="affix"あなたが取り付けられたい要素に。

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

使い方

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

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


• 取り付けられ要素を過ぎてスクロールすると、実際の貼付をトリガ-プラグインは置き換えところです.affix-topまたは.affix-bottomを持つクラスを.affixクラス（セットのposition:fixed ）。 この時点で、あなたは、CSS追加する必要がありtopまたはbottomページで取り付けられ要素を配置するには、プロパティを。


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

上記の最初の例では、接辞プラグインが追加されます.affixに：クラス（固定位置） <nav>私たちは上から197ピクセルをスクロールしたときに要素。 あなたが例を開くと、あなたはまた、我々はCSS追加されたことが表示されますtopに0の値を持つプロパティを.affixクラス。 これは、我々は上から197ピクセルをスクロールしたときにナビゲーションバーは、すべての時点で、ページの上部に留まることを確認することです。

Scrollspy＆接辞

一緒に接辞プラグインを使用してScrollspyのプラグイン：

完了してBootstrap接辞リファレンス

すべての完全なリファレンスは、メソッド、およびイベントを固定するために、私たちに行くBootstrap JS接辞リファレンス 。