ブートストラップJS接辞
JS接辞（affix.js）
Affixプラグインを使用すると、要素をページ上の領域に固定（ロック）することができます。これは、ナビゲーションメニューやソーシャルアイコンボタンでよく使用され、ページを上下にスクロールしながら特定の領域に「固定」されます。
プラグインは、スクロール位置に応じて、この動作のオンとオフを切り替えます（CSS位置の値を静的から固定に変更します）。
affixプラグインは、、、および
の3つ.affixのクラスを切り替えます。各クラスは特定の状態を表します。クラスを除い
て、実際の位置を処理するためにCSSプロパティを追加する必要があります。.affix-top.affix-bottomposition:fixed.affix
詳細については、BootstrapAffixチュートリアルをお読みください。
ヒント： Affixプラグインは、 Scrollspyプラグインと一緒に使用されることがよくあり ます。
データ経由-*属性
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を介して渡すことができます。データ属性の場合、data-offset = ""のように、オプション名をdata-に追加します。
| Name | Type | Default | Description |
|---|---|---|---|
| offset | number | object | function | 10 |
Specifies the number of pixels to offset from screen when calculating position of scroll. When using a single number, the offset is added to both top and bottom directions. If you only want to control the top or the bottom, use an object, like offset: {top:25}For multiple offsets, use offset: {top:25, bottom:50}Tip: Use a function to dynamically provide an offset (can be useful for responsive designs) |
| target | selector | node | element | the window object | Specifies the target element of the affix |
接辞イベント
次の表に、使用可能なすべての接辞イベントを示します。
| Event | Description | Try it |
|---|---|---|
| affix.bs.affix | Occurs before fixed positioning is added to the element (e.g, when the .affix-top class is about to be replaced with the .affix class) |
|
| affixed.bs.affix | Occurs after fixed positioning is added to the element (e.g., after the .affix-top class is replaced with the .affix class) |
|
| affix-top.bs.affix | Occurs before the top element returns to its original (non-fixed) position (e.g., the .affix class is about to be replaced with .affix-top) |
|
| affixed-top.bs.affix | Occurs after the top element returns to its original (non-fixed) position (e.g., the .affix class has been replaced with .affix-top) |
|
| affix-bottom.bs.affix | Occurs before the bottom element returns to its original (non-fixed) position (e.g., the .affix class is about to be replaced with .affix-bottom) |
|
| affixed-bottom.bs.affix | Occurs after the bottom element returns to its original (non-fixed) position (e.g., the .affix class has been replaced with .affix-bottom) |
その他の例
添付のナビゲーションバー
水平方向に固定されたナビゲーションメニューを作成します。
例
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
jQueryを使用してナビゲーションバーを自動的に付加する
ユーザーがスクロールして指定された要素（<header>）を渡した後、jQueryのouterHeight（）メソッドを使用してナビゲーションバーを付加します。
例
$(".navbar").affix({offset: {top: $("header").outerHeight(true)}
});
Scrollspy＆Affix
Scrollspyプラグインと一緒にAffixプラグインを使用する ：
水平メニュー（ナビゲーションバー）
<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;
}