基本 ≪ アフィックス ≪ JavaScript ≪ Bootstrap3日本語リファレンス

アフィックスaffix.jsの基本サンプル。

スクロールに追従させたい要素に、data-spy属性を追加し、affixを指定する。

サンプル

ソースコード

HTML

<body role="document">

	<div class="container-fluid">
		<div class="container">
			<div id="sampleAffixWrap">
				<div id="sampleAffix" data-spy="affix">
					<h1><a href="../javascript/affix.html" target="_blank">アフィックス（affix.js）</a>の<a href="../javascript/affix-basic.html" target="_blank">基本</a>サンプル。</h1>
					<div class="btn-group btn-group-justified" role="group">
						<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>
			</div>
			<p>上の要素を上端に固定表示する。</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>
			</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: 134px;
}
#sampleAffix {
	width: 750px;
	padding: 0 20px;
	background-color: #fff;
}
#sampleAffix.affix {
	top: 0px;
}