Bootstrap3
日本語リファレンス

広告

JavaScriptで呼び出す


アフィックス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>
			<a href="#" class="btn btn-default" role="button">B</a>
			<a href="#" class="btn btn-default" role="button">C</a>
			<a href="#" class="btn btn-default" role="button">D</a>
			<a href="#" class="btn btn-default" role="button">E</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を読み込んだ後に配置する必要がある。


広告