イベント Events
アフィックスaffix.jsのイベントについて。
構文
構文
$( セレクター ).on( イベント, function () {
// 処理
} );
セレクターで、スクロールに追随させる要素（固定表示させる要素）を選択。
イベントに指定できるのは、affix.bs.affix、affixed.bs.affix、affix-top.bs.affix、affixed-top.bs.affix、affix-bottom.bs.affix、affixed-bottom.bs.affix。
イベント一覧表
| イベント名 | 説明 |
|---|---|
| affix.bs.affix |
固定表示する直前のイベント。 |
| affixed.bs.affix |
固定表示開始後のイベント。 |
| affix-top.bs.affix |
上のオフセット範囲内に入り、固定表示を解除する直前のイベント。 |
| affixed-top.bs.affix |
上のオフセット範囲内に入り、固定表示を解除した後のイベント。 |
| affix-bottom.bs.affix |
下のオフセット範囲内に入り、固定表示を解除する直前のイベント。 |
| affixed-bottom.bs.affix |
下のオフセット範囲内に入り、固定表示を解除した後のイベント。 |
サンプル
- 「affix.bs.affix」イベント時に、「A:」の横の数値をカウントアップする。
- 「affixed.bs.affix」イベント時に、「B:」の横の数値をカウントアップする。
- 「affix-top.bs.affix」イベント時に、「C:」の横の数値をカウントアップする。
- 「affixed-top.bs.affix」イベント時に、「D:」の横の数値をカウントアップする。
- 「affix-bottom.bs.affix」イベント時に、「E:」の横の数値をカウントアップする。
- 「affixed-bottom.bs.affix」イベント時に、「F:」の横の数値をカウントアップする。
サンプル
ソースコード
<body role="document">
<div class="jumbotron">
<div class="container">
<h1>サンプル</h1>
<p><a href="../javascript/affix-events.html" target="_blank">アフィックス（affix.js）のイベント</a>のサンプル。</p>
</div>
</div>
<div class="container-fluid">
<div class="container">
<div id="sampleAffixWrap">
<div id="sampleAffix" class="btn-group btn-group-justified" role="group" data-spy="affix" data-offset-top="270" data-offset-bottom="1500">
<a id="affixBsAffix" href="#" class="btn btn-default" role="button">A:0</a>
<a id="affixedBsAffix" href="#" class="btn btn-default" role="button">B:0</a>
<a id="affixTopBsAffix" href="#" class="btn btn-default" role="button">C:0</a>
<a id="affixedTopBsAffix" href="#" class="btn btn-default" role="button">D:0</a>
<a id="affixBottomBsAffix" href="#" class="btn btn-default" role="button">E:0</a>
<a id="affixedBottomBsAffix" href="#" class="btn btn-default" role="button">F:0</a>
</div>
</div>
<p>スクロールし、A〜Fのボタン群が上端に到達すると、ボタン群だけを上端に固定表示する。</p>
<p>スクロールし、A〜Fのボタン群が下端から「1500px」の位置に到達すると、ボタン群の固定表示を終了する。</p>
<p>「affix.bs.affix」イベント時に、「A:」の横の数値をカウントアップする。</p>
<p>「affixed.bs.affix」イベント時に、「B:」の横の数値をカウントアップする。</p>
<p>「affix-top.bs.affix」イベント時に、「C:」の横の数値をカウントアップする。</p>
<p>「affixed-top.bs.affix」イベント時に、「D:」の横の数値をカウントアップする。</p>
<p>「affix-bottom.bs.affix」イベント時に、「E:」の横の数値をカウントアップする。</p>
<p>「affixed-bottom.bs.affix」イベント時に、「F:」の横の数値をカウントアップする。</p>
<ol>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
</ol>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script>
$(function () {
var $affixBsAffix = 0;
var $affixedBsAffix = 0;
var $affixTopBsAffix = 0;
var $affixedTopBsAffix = 0;
var $affixBottomBsAffix = 0;
var $affixedBottomBsAffix = 0;
$('#sampleAffix').on('affix.bs.affix', function () {
$('#affixBsAffix').text( "A:" + ++$affixBsAffix );
});
$('#sampleAffix').on('affixed.bs.affix', function () {
$('#affixedBsAffix').text( "B:" + ++$affixedBsAffix );
});
$('#sampleAffix').on('affix-top.bs.affix', function () {
$('#affixTopBsAffix').text( "C:" + ++$affixTopBsAffix );
});
$('#sampleAffix').on('affixed-top.bs.affix', function () {
$('#affixedTopBsAffix').text( "D:" + ++$affixedTopBsAffix );
});
$('#sampleAffix').on('affix-bottom.bs.affix', function () {
$('#affixBottomBsAffix').text( "E:" + ++$affixBottomBsAffix );
});
$('#sampleAffix').on('affixed-bottom.bs.affix', function () {
$('#affixedBottomBsAffix').text( "F:" + ++$affixedBottomBsAffix );
});
});
</script>
</body>