最新のWeb開発のチュートリアル
 

Bootstrap JS接辞

❮前 次リファレンス❯

JS接辞(affix.js)

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

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

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

詳細については、当社の読みBootstrap接辞のチュートリアルを 。

ヒント：接辞プラグインは、多くの場合、一緒に使用されているScrollspyのプラグイン。

ヴィアdata-*属性

追加data-spy="affix"あなたがスパイしたい要素に、およびdata-offset-top|bottom=" number "属性は、スクロールの位置を計算します。

例

<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
»それを自分で試してみてください

JavaScriptを介して、

手動で有効にします。

例

$('.nav').affix({offset: {top: 150} });
»それを自分で試してみてください

オプションを貼ります

オプションは、データ属性またはJavaScriptを介して渡すことができます。 データ属性の場合、データ・オフセット= ""のように、データーにオプション名を追加します。

名 タイプ デフォルト 説明
offsetnumber | object | function10 スクロールの位置を計算する際、画面からオフセットするピクセル数を指定します。 単一の番号を使用する場合は、オフセットは、上部と下部の両方の方向に加えられます。 あなたが唯一の上部または下部を制御する場合のように、オブジェクトを使用してoffset: {top:25}

複数のオフセットについては、使用するoffset: {top:25, bottom:50}

ヒント：動的に提供する機能を使用してオフセット（応答性の設計のために有用であり得ます）
targetselector | node | elementthe window object 接辞のターゲット要素を指定します。

イベントを貼ります

次の表は、使用可能なすべての接辞のイベントを示します。

イベント 説明 それを試してみてください
affix.bs.affix 固定位置決めが（例えば、要素に追加される前に発生し.affix-topクラスに置き換えされようとしている.affixクラス） それを試してみてください
affixed.bs.affix 固定された位置決め要素に追加された後に発生します（例えば、後.affix-topクラスがで置き換えられ.affixクラス） それを試してみてください
affix-top.bs.affix 先頭の要素は、元の（非固定）の位置に戻る前に発生します（例えば、 .affixクラスはと交換されようとしている.affix-top ） それを試してみてください
affixed-top.bs.affix 先頭の要素は、元の（非固定）の位置に戻った後（例えば、発生.affixクラスはに置き換えられている.affix-top ） それを試してみてください
affix-bottom.bs.affix 底部要素は、元の（非固定）の位置に戻る前に発生します（例えば、 .affixクラスに置き換えされようとしている.affix-bottom ） それを試してみてください
affixed-bottom.bs.affix 底部要素（例えば、元の（非固定）の位置に戻った後に発生し.affixクラスはに置き換えられている.affix-bottom ） それを試してみてください
例

例

固定されたナビゲーションバー

水平固定されたナビゲーションメニューを作成します。

例

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
»それを自分で試してみてください

自動的にナビゲーションバーを固定するためのjQueryを使用しました

jQueryの使用outerHeight()ユーザーが指定した要素が渡さスクロールした後にナビゲーションバーを固定する方法を(<header>)

例

$(".navbar").affix({offset: {top: $("header").outerHeight(true)} });
»それを自分で試してみてください

Scrollspy＆接辞

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

水平方向のメニュー（ナビゲーションバー）

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

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

</body>
»それを自分で試してみてください

垂直メニュー（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>
»それを自分で試してみてください

接辞上のアニメーションナビゲーションバー

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

例 - 変更の背景色やスクロール上のナビゲーションバーのパディング

.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;
}
»それを自分で試してみてください

例 - ナビゲーションバーでスライド

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

.affix-top {
    position: static;
    top: -35px;
}
»それを自分で試してみてください

❮前 次リファレンス❯