特定の位置で追従を終了 ≪ アフィックス ≪ JavaScript ≪ Bootstrap3日本語リファレンス

特定の位置で追従を終了するアフィックスaffix.jsサンプル。

data-offset-bottom属性を追加し、スクロール追従を終了する位置を、ページの下端からの距離で指定する。これにより、特定の位置で追従を終了する。
CSSでaffix-bottomクラスにposition: absolute;を追加する。

サンプル

ソースコード

HTML

<body role="document">

	<div class="jumbotron">
		<div class="container">
			<h1>サンプル</h1>
			<p><a href="../javascript/affix-bottom.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 href="#" class="btn btn-default" role="button">Ａ</a>
					<a href="#" class="btn btn-default" role="button">Ｂ</a>
					<a href="#" class="btn btn-default" role="button">Ｃ</a>
					<a href="#" class="btn btn-default" role="button">Ｄ</a>
					<a href="#" class="btn btn-default" role="button">Ｅ</a>
				</div>
			</div>
			<p>スクロールし、Ａ〜Ｅのボタン群が上端に到達すると、ボタン群だけを上端に固定表示する。</p>
			<p>スクロールし、Ａ〜Ｅのボタン群が下端から「1500px」の位置に到達すると、ボタン群の固定表示を終了する。</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>
</body>

CSS

#sampleAffixWrap {
	height: 64px;
}
#sampleAffix {
	width: 480px;
}
#sampleAffix.affix {
	top: 0px;
}
#sampleAffix.affix-bottom {
	position: absolute;
}