Bootstrap JS Affix

❮ 前章へ 次のリファレンス ❯

JS Affix (affix.js)

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

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

affix プラグインは、.affix、.affix-top、 .affix-bottom の 3 つのクラスを切替えます。各クラスは、特定の状態を表します。 実際の位置を処理するためには、.affix クラスの position:fixed を除いて、 CSS プロパティを追加しなければなりません

詳細については、Bootstrap Affix チュートリアルをご覧ください。

チップ: ほとんどの場合、Affix プラグインは Scrollspy プラグイン と一緒に使用されます。

data-* 属性による場合

スパイしたい要素にdata-spy="affix" を追加し、スクロールの位置を計算するため data-offset-top|bottom="number" を追加します。

例

<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
Try it Yourself »

JavaScript による場合

マニュアルで有効にします：

例

$('.nav').affix({offset: {top: 150} });
Try it Yourself »

Affix オプション

オプションは、data 属性か JavaScript を通して渡すことができます。 データ属性には、data-offset="" のように data- の後にオプション名を付加します。

名称 型 デフォルト 説明
offset number | object | function 10 スクロールの位置を計算するときに、画面からオフセットするピクセル数を指定します。 数値を1つだけ指定した場合、オフセットは top と bottom の両方向に追加されます。 top または bottom の何れか一方を制御したい場合は、offset: {top:25} のように、オブジェクトを使用します。

両方のオフセットには、offset: {top:25, bottom:50} を使用します

チップ: レスポンシブデザインを便利にするため、オフセットを動的に供給するには関数を使用します
target selector | node | element the window object affix のターゲット要素を指定します

Affix イベント

次の表は、利用可能な affix イベントの一覧です。

.affix-top).affix-top).affix-bottom).affix-bottom)
イベント 説明 Try it
affix.bs.affix 要素に配置方法 fixed が追加される前に発生します（例えば、.affix-top クラスが .affix クラスに置き換えられようとしているとき） Try it
affixed.bs.affix 要素に配置方法 fixed が追加さた後に発生します（例えば、.affix-top クラスが .affix クラスに置き換えられたとき） Try it
affix-top.bs.affix top 要素が、元の配置（fixed 以外）に戻る前に発生します（例えば、.affix クラスが .affix-top に置き換えられようとしているとき） Try it
affixed-top.bs.affix top 要素が、元の配置（fixed 以外）に戻った後に発生します（例えば、.affix クラスが .affix-top に置き換えられたとき） Try it
affix-bottom.bs.affix bottom 要素が、元の配置（fixed 以外）に戻る前に発生します（例えば、.affix クラスが .affix-bottom に置き換えられようとしているとき） Try it
affixed-bottom.bs.affix bottom 要素が、元の配置（fixed 以外）に戻った後に発生します（例えば、.affix クラスが .affix-bottom に置き換えられたとき） Try it
Examples

例

Affixed ナビゲーションバー

横方向の affix ナビゲーションバーを作成します：

例

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
Try it Yourself »

jQuery を使用して自動的にナビゲーションバーを affix 化

ユーザが、指定した要素（<header>）を越えてスクロールした後、ナビゲーションバーを固定するためには jQuery の outerHeight() メソッドを使用します：

例

$(".navbar").affix({offset: {top: $("header").outerHeight(true)} });
Try it Yourself »

Scrollspy & Affix

Affix プラグインと共に Scrollspy プラグインを使用します：

横向きのメニュー (Navbar)

<body data-spy="scroll" data-target=".navbar" data-offset="50">

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
...
</nav>

</body>
Try it Yourself »

縦向きのメニュー (Sidenav)

<body data-spy="scroll" data-target="#myScrollspy" data-offset="15">

<nav class="col-sm-3" id="myScrollspy">
  <ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
  ...
</nav>

</body>
Try it Yourself »

affix のアニメーション navbar

異なる .affix クラスを操作するために CSS を使用します：

例 - スクロール時に navbar の背景色とパディングを変える

.affix {
    top: 0;
    width: 100%;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    background-color: #F44336;
    border-color: #F44336;
}

.affix a {
    color: #fff !important;
    padding: 15px !important;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.affix-top a {
    padding: 25px !important;
}
Try it Yourself »

例 - navbar のスライド

.affix {
    top: 0;
    width: 100%;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.affix-top {
    position: static;
    top: -35px;
}
Try it Yourself »

❮ 前章へ 次のリファレンス ❯