ブートストラップの追加ナビゲーション


Bootstrap 追加ナビゲーション (Affix) プラグイン

追加ナビゲーション (Affix) プラグインを使用すると、<div> をページ上の特定の位置に固定できます。プラグインの使用のオンとオフを切り替えることもできます。一般的な例はソーシャル アイコンです。これらは特定の位置から始まりますが、ページ上のマークをクリックすると、<div> はその位置にロックされ、ページの残りの部分と一緒にスクロールしません。

このプラグインの機能を個別に参照したい場合は、affix.jsを参照する必要があります。または、「ブートストラップ プラグインの概要」の章で説明したように、bootstrap.js または bootstrap.min.js の縮小バージョンを参照できます。

使用方法

追加のナビゲーション (Affix) プラグインは、data 属性または JavaScript を通じて使用できます。

  • データ属性を介して: 追加のナビゲーション (Affix) 動作を要素に追加する必要がある場合は、監視する必要がある要素に data-spy="affix" を追加するだけです。オフセットを使用して、要素のロックと移動をいつ切り替えるかを定義します。

    次の例は、データ属性を使用してアタッチされたナビゲーション (Affix) プラグインの使用を示しています。オンラインの例を表示するには

    $('#myAffix')。 affix({

    offset )

  • Example

    次の例は、JavaScript による Affix プラグインの使用方法を示しています。