スクロールスパイとアフィックスを併用する縦型カプセル・メニュー ≪ スクロールスパイ ≪ JavaScript ≪ Bootstrap3日本語リファレンス

スクロールスパイとページ内リンク用縦型カプセル・メニューとアフィックスを併用する方法。
サンプル
ソースコード
HTML
<body role="document" data-spy="scroll" data-target="#sampleScrollSpy">

	<div id="pageHeader" class="jumbotron">
		<div class="container">
			<h1>サンプル</h1>
			<p><a href="../javascript/affix-options-offset.html#usage2" target="_blank">affix.jsのoffsetオプションのサンプル</a>のサンプル。</p>
		</div>
	</div>

	<div class="container-fluid">
		<div class="container">
			<div class="row">
				<div class="col-xs-4">
					<div id="sampleAffix">
						<h2>メニュー</h2>	
						<div id="sampleScrollSpy">
							<ul class="nav nav-pills nav-stacked">
								<li><a class="linkInThePage" href="#sampleA">ページ内リンクＡ</a></li>
								<li><a class="linkInThePage" href="#sampleB">ページ内リンクＢ</a></li>
								<li><a class="linkInThePage" href="#sampleC">ページ内リンクＣ</a></li>
								<li><a class="linkInThePage" href="#sampleD">ページ内リンクＤ</a></li>
								<li><a class="linkInThePage" href="#sampleE">ページ内リンクＥ</a></li>
							</ul>
						</div>
					</div>
				</div>
				<div class="col-xs-8">
					<div id="sampleMainContents">
						<p><a href="../javascript/scrollspy-pills-affix.html" target="_blank">スクロールスパイとアフィックスを併用する縦型カプセル・メニュー</a>のサンプル。</p>
						<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>
						<h2 id="sampleD">Ｄ</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="sampleE">Ｅ</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>
				</div>
			</div>
		</div>
	</div>

	<div id="pageFooter" class="container-fluid">
		<div class="container">
			<p><a href="../javascript/affix-options-offset.html#usage2" target="_blank">affix.jsのoffsetオプションのサンプル</a>のサンプル。</p>
		</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 src="http://foo.tld/animatescroll.js-master/animatescroll.noeasing.js"></script>
	<script>
		$( function() {

			$('#sampleAffix').affix({
				offset: {
					top: function () {
						return (this.top = $('#pageHeader').outerHeight(true))
					},
					bottom: function () {
						return (this.bottom = $('#pageFooter').outerHeight(true) + 10 )
					}
				}
			});

			$('.linkInThePage').click( function () {
				var hrefValue = $(this).attr( 'href' );
				$(hrefValue).animatescroll();
			} );

		});
	</script>
</body>