JavaScriptで呼び出す ≪ アフィックス ≪ JavaScript ≪ Bootstrap3日本語リファレンス

アフィックスaffix.jsをJavaScriptで呼び出す方法。

構文

$( セレクター ).affix();

セレクターで、スクロールに追従させたい要素を選択。

サンプル

別窓で表示

ソースコード

HTML

<div id="sampleAffixWrap">
	<div id="sampleAffix">
		<h1><a href="../javascript/affix.html" target="_blank">アフィックス</a>を<a href="../javascript/affix-javascript.html" target="_blank">JavaScriptで呼び出す</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>

CSS

#sampleAffixWrap {
	height: 134px;
}
#sampleAffix {
	width: 750px;
	padding: 0 20px;
	background-color: #fff;
}
#sampleAffix.affix {
	top: 0px;
}

JavaScript

<script>
$( function() {
	$('#sampleAffix').affix();
});
</script>

このJavaScriptコードは、jquery.min.jsを読み込んだ後に配置する必要がある。