要素を親コンテナ内で固定表示にすることが出来ます。実際の動きはデモをご覧ください。
You can fix the element in the parent element. Please see the demo.
jQuery 1.8またはそれ以上
jQuery 1.8 or later
jquery.jsの後にjquery.fixedinside.jsを読み込みます。
Load jquery.fixedinside.js after loading jquery.js.
<script src="/https/github.com/path/to/jquery.js"></script>
<script src="/https/github.com/path/to/jquery.fixedinside.js"></script>
<div id="container">
<p id="fixed-element"></p>
</div>
コンテナにposition relativeまたはabsoluteを適用します。
Set position "relative" or "absolute" to the container.
#container { position: relative; }
固定する要素はposition absoluteまたはfixedを指定します。
Set position "absolute" or "fixed" to the inner element you want to fixed.
#fixed-element {
position: absolute;
}
固定する要素にfixedinsideメソッドを実行します。
Run fixedinside method to the element you want to fixed.
$(function () {
$('#fixed-element')
.fixedinside();
});
引数に数値を入力することでオフセット値を指定できます。たとえば、固定されたヘッダーにかぶらなくすることが出来ます。
You can input number to the argument to set offset.
$('#fixed-element')
.fixedinside(100);
現バージョンでは、対応している固定位置はtopのみです。
At this version, you can fix-inside the element to top of the container.
Copyright 2013 Satoru Kawahara
Licensed under MIT.