affix.js

• 使用例
• 使用方法
• オプション
• メソッド
• イベント

使用例

affixプラグインはposition: fixed;のオン/オフを切り替え、 position: sticky;の効果を手探りでエミュレートします。 Bootstrapの公式サイトの右メニューは、affixプラグインの実際のデモにもなっています。

使用方法

affixプラグインはdata属性、または手動によるJavaScriptで使用することが可能です。 どちらの場合も、positionのためのCSSと、affixが適用されるコンテンツのwidthを提供しなければなります。

注意: Safariのレンダリングのバグのため、 カラムを引き出したり押し出すような、相対的(relative)なpositionの要素を含む要素でaffixを使用しないで下さい。

CSSを使用した位置取り

affixプラグインは3つのクラスを切り替えることで、特定のそれぞれの状態を表現します。 (.affix、.affix-top、.affix-bottom) .affix時のposition: fixed;を除き、 開発者自身が実際の位置取りを調整するために、3つのクラス(このプラグインに依存した)のスタイルを提供しなければいけません。

下記で、affixプラグインがどうように動作するかを説明します。

1. まず、このプラグインは、その要素が最上位の位置であることを示す.affix-topを追加します。 ここでのCSSによる位置調整は必要ありません。
2. あなたがaffixしたい要素がスクロールされることで、実際のaffixの処理がトリガされる必要があります。 .affix-topが.affixに置き換えられることで、 position: fixed;が設定されます。(BootstrapのCSSによって提供)
3. もし、bottomのoffsetが定義されている場合は、 スクロールが行われると.affixを.affix-bottomに置き換える必要があります。 offsetは任意指定であるため、その設定によって適切なCSSを用意する必要が生じます。 このケースでは、position: absolute;が必要になります。 このプラグインでは、その場所からのどの位置に要素を配置するのかを決定するために、 data属性またはJavaScriptのオプションを使用します。

data属性を使用

簡単にaffixの挙動を任意の要素に追加するには、対象の要素にdata-spy="affix"を追加します。 要素のピン止めを切り替える際の定義のために、offsetを使用してください。

<div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
  ...
</div>

JavaScriptを使用

JavaScriptを使用してaffixを呼び出します。

$('#myAffix').affix({
  offset: {
    top: 100,
    bottom: function () {
      return (this.bottom = $('.footer').outerHeight(true))
    }
  }
})

オプション

data属性またはJavaScriptを通じてオプションが渡されます。 data属性では、data-offset-top="200"のようにしてオプション名の前にdata-を追加します。

名前	型	デフォルト	説明
offset	number function object	10	スクロールの位置計算をする際に、スクリーンからオフセットする長さをピクセルで指定します。 1つだけ数値が指定された場合、topとbottomの両方にオフセットが適用されます。 topまたはbottomを別々に指定するには、オブジェクトでoffset: { top: 10 }、 またはoffset: { top: 10, bottom: 5 }のように指定します。 オフセットを動的に計算する必要がある場合は、関数(function)を使用します。
target	selector node jQuery element	windowオブジェクト	affixの対象要素を指定します。

メソッド

.affix(options)

affixのコンテンツとして、有効化します。 任意のoptionsのobjectを受け取ります。

$('#myAffix').affix({
  offset: 15
})

.affix('checkPosition')

相対要素のサイズ、位置、スクロール位置を基にして、affixの状態を再計算します。 .affix、.affix-top、.affix-bottomクラスは、 affixされたコンテンツの新しい状態に沿って追加または削除が行われます。 このメソッドはaffixされたコンテンツのサイズまたは対象要素が変更される度に、 正しい位置が保証されるために呼び出される必要があります。

$('#myAffix').affix('checkPosition')

イベント

Bootstrapのaffixプラグインは、affix機能へのフックのために幾つかのイベントを用意してくれています。

イベントの型	説明
affix.bs.affix	要素がaffixにされる直前に、このイベントが発火されます。
affixed.bs.affix	要素がaffixにされた後に、このイベントが発火されます。
affix-top.bs.affix	要素がaffixed-topにされる直前に、このイベントが発火されます。
affixed-top.bs.affix	要素がaffixed-topにされた後に、このイベントが発火されます。
affix-bottom.bs.affix	要素がaffixed-bottomにされる直前に、このイベントが発火されます。
affixed-bottom.bs.affix	要素がaffixed-bottomにされた後に、このイベントが発火されます。

 Back to top