Bootstrap3
日本語リファレンス
広告
  1. Bootstrap3日本語リファレンス
  2. JavaScript
  3. アフィックス
  4. オプション一覧表
  5. offsetオプション

offsetオプション

アフィックス（affix.js）におけるoffsetオプションは、上下のオフセットを指定出来るオプション。

属性値一覧表 data-offset属性 data-offset-top属性とdata-offset-bottom属性 JavaScriptにおいてoffsetオプションを指定 JavaScriptにおいてoffsetオプションに数値だけを指定 JavaScriptにおいてoffsetオプションに関数を指定

属性値一覧表

初期設定値は、10である。

属性値 説明
数値 数値をひとつだけ指定した場合、上下のオフセットに同じ数値を適用する。ピクセル単位の数値で指定する。
{ top: 数値 } 上のオフセットの値を、ピクセル単位の数値で指定する。
{ bottom: 数値 } 下のオフセットの値を、ピクセル単位の数値で指定する。
{ top: 数値, bottom: 数値 } 上（top）と下（bottom）のオフセットの値を、ピクセル単位の数値で指定する。

data-offset属性

data-offset属性に数値を指定すると、上下のオフセットに同じ数値を適用する。

サンプル
別窓で表示
ソースコード

HTML

<body role="document">

	<div class="jumbotron">
		<div class="container">
			<h1>サンプル</h1>
			<p><a href="../javascript/affix-options-data-offset.html#usage2" 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="270">
					<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>下端から270pxの位置に到達すると、固定表示を解除する。<</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: 64px;
}
#sampleAffix {
	width: 480px;
}
#sampleAffix.affix {
	top: 0px;
}

data-offset-top属性とdata-offset-bottom属性

data-offset-top属性には、上のオフセットを指定出来る。

data-offset-bottom属性には、下のオフセットを指定出来る。

サンプル
別窓で表示
ソースコード

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;
}

JavaScriptにおいてoffsetオプションを指定

offsetオプションを指定し、JavaScriptで呼び出す。

サンプル
別窓で表示
ソースコード

JavaScript

$( function() {
	$('#sampleAffix').affix({
		offset: {
			top: 70,
			bottom: 300
		}
	});
});

HTML

<div class="container-fluid">
	<div class="container">
		<div id="sampleAffixWrap">
			<div>
				<h1 class="sampleAffixTopOffset"><a href="../javascript/affix.html" target="_blank">アフィックス</a>において、<a href="../javascript/affix-options-offset.html#usage4" target="_blank">offsetオプションを指定しJavaScriptで呼び出す</a>サンプル。</h1>
				<div id="sampleAffix" 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>
		<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 id="sampleFooter">
			フッター
		</div>
	</div>
</div>

CSS

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

JavaScriptにおいてoffsetオプションに数値だけ指定

サンプル
別窓で表示
ソースコード

JavaScript

$( function() {
	$('#sampleAffix').affix({
		offset: 70
	});
});

HTML

<div class="container-fluid">
	<div class="container">
		<div id="sampleAffixWrap">
			<div>
				<h1 class="sampleAffixTopOffset"><a href="../javascript/affix.html" target="_blank">アフィックス</a>において、<a href="../javascript/affix-options-offset.html#usage5" target="_blank">offsetオプションに数値だけ指定する</a>サンプル。</h1>
				<div id="sampleAffix" 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>
		<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 id="sampleFooter">
			フッター
		</div>
	</div>
</div>

CSS

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

JavaScriptにおいてoffsetオプションに関数を指定

オフセットに、動的に算出した数値を指定したい場合は、関数を指定することで可能だ。

サンプル
別窓で表示
ソースコード

JavaScript

$( function() {
	$('#sampleAffix').affix({
		offset: {
			top: function () {
				return (this.top = $('.sampleAffixTopOffset').outerHeight(true))
			},
			bottom: function () {
				return (this.bottom = $('#sampleFooter').outerHeight(true))
			}
		}
	});
});

HTML

<div class="container-fluid">
	<div class="container">
		<div id="sampleAffixWrap">
			<div>
				<h1 class="sampleAffixTopOffset"><a href="../javascript/affix.html" target="_blank">アフィックス</a>において、<a href="../javascript/affix-options-offset.html#usage6" target="_blank">offsetオプションに関数を指定する</a>サンプル。</h1>
				<div id="sampleAffix" 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>
		<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 id="sampleFooter">
			フッター
		</div>
	</div>
</div>

CSS

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