Bootstrap3
日本語リファレンス

広告

イベント  Events


アフィックスaffix.jsのイベントについて。


構文
$( セレクター ).on( イベント, function () {
	// 処理
} );

セレクターで、スクロールに追随させる要素(固定表示させる要素)を選択。

イベントに指定できるのは、affix.bs.affixaffixed.bs.affixaffix-top.bs.affixaffixed-top.bs.affixaffix-bottom.bs.affixaffixed-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>

広告