イベント Events
スクロールスパイのイベントについて。
構文
構文
on( events, fn )メソッドを使う場合。
$( セレクター ).on( イベント, function () {
// 処理
} );
セレクターでスクロールスパイを選択。
イベントに指定できるのは、activate.bs.scrollspyだけ。
イベント一覧表
| イベント名 | 説明 |
|---|---|
| activate.bs.scrollspy | スクロールスパイによって、ナビゲーション項目がアクティブになった時のイベント。 |
サンプル
スクロールを動かすなどし、スクロールスパイでナビゲーション項目をアクティブにすると、「スクロールスパイでアクティブにした回数：」の右横の数字が増える。
サンプル
ソースコード
HTMLとJavaScript
<body role="document" data-spy="scroll" data-target="#sampleScrollSpy" data-offset="72" id="top">
<div id="sampleScrollSpy">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#sampleNavbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand linkInThePage" href="#top">
タイトル
</a>
</div>
<div class="collapse navbar-collapse" id="sampleNavbar">
<ul class="nav navbar-nav">
<li><a class="linkInThePage" href="#sampleA">ページ内リンクＡ</a></li>
<li><a class="linkInThePage" href="#sampleB">ページ内リンクＢ</a></li>
<li><a class="linkInThePage" href="#sampleC">ページ内リンクＣ</a></li>
</ul>
<p class="navbar-text navbar-right"><span id="activateBsScrollspy"></span></p>
</div>
</div>
</nav>
</div>
<div class="jumbotron">
<div class="container">
<h1>サンプル</h1>
<p><a href="../javascript/scrollspy-navbar-events.html" target="_blank">ナビゲーション・バーにおけるスクロールスパイ</a>のサンプル。</p>
</div>
</div>
<div class="container">
<h2 id="sampleA">Ａ</h2>
<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>
</ol>
<h2 id="sampleB">Ｂ</h2>
<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>
</ol>
<h2 id="sampleC">Ｃ</h2>
<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>
</ol>
</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 src="http://bootstrap3.cyberLab.info/jquery/animatescroll.js-master/animatescroll.noeasing.js"></script>
<script>
$( function() {
$('.linkInThePage').click( function () {
var hrefValue = jQuery(this).attr( 'href' );
$(hrefValue).animatescroll({padding:70});
} );
} );
$( function() {
var $counter = 0;
$('#sampleScrollSpy').on('activate.bs.scrollspy', function () {
$('#activateBsScrollspy').text( "スクロールスパイでアクティブにした回数：" + ++$counter );
});
} );
</script>
</body>