Overview
簡単にサイドバーなどのHTML要素の固定を実装するjQueryプラグインです。
スクロール量がサイドバーの下辺を超えた時に固定するだけでなく、下スクロールから上スクロールに切り替えた時にすぐにサイドバーも上方向にスクロールするのが特徴です。
INTRODUCTION
Download
DEMO
BASIC-1
サイドバー$("#aside")を固定してみます。
Javascript
<script src="jquery.min.js"></script>
<script src="jquery.frix.min.js"></script>
<script>
$(document).ready( function() { $("#aside").frix(); });
</script>BASIC-2
複数要素を固定してみます。
Javascript
<script src="jquery.min.js"></script>
<script src="jquery.frix.min.js"></script>
<script>
$(document).ready( function() { $(".aside").frix(); });
</script>BASIC-3
ヘッダナビのようなバーチカルな要素も固定できます。
Javascript
<script src="jquery.min.js"></script>
<script src="jquery.frix.min.js"></script>
<script>
$(document).ready( function() { $("#nav").frix(); });
</script>OPTIONS
data属性を使って設定を追加します。
data-frix-fixed-target
デフォルトではfrix()対象の親要素の底辺で固定が終了します。
停止位置を親要素以外にしたい時にこの設定をします。
Javascript
<script src="jquery.min.js"></script>
<script src="jquery.frix.min.js"></script>
<script>
$(document).ready( function() { $("#aside").frix(); });
</script>HTML
<div id="aside" data-frix-fixed-target="#target">
・・・
</div>data-frix-scroll-margin-top
上方向にスクロール中、frix()対象の要素が上辺で固定されている時にmargin-topを設定します。
Javascript
<script src="jquery.min.js"></script>
<script src="jquery.frix.min.js"></script>
<script>
$(document).ready( function() { $("#aside").frix(); });
</script>HTML
<div id="aside" data-frix-scroll-margin-top="50">
・・・
</div>[responsive] data-frix-width
frix()対象のwidthをパーセント(%)で指定して可変にしたい時は、data-frix-widthに記述します。
Javascript
<script src="jquery.min.js"></script>
<script src="jquery.frix.min.js"></script>
<script>
$(document).ready( function() { $("#aside").frix(); )};
</script>HTML
<div id="aside" data-frix-width="25%">
・・・
</div>[responsive] data-frix-min-width / data-frix-min-width
位置の固定が動作するwidthを指定します。レスポンシブウェブデザイン等で特定の幅以下（以上）でfrix()を動作させない時に利用します。
Javascript
<script src="jquery.min.js"></script>
<script src="jquery.frix.min.js"></script>
<script>
$(document).ready( function() { $("#aside").frix(); });
</script>HTML
<div id="aside" data-frix-width="25%" data-frix-min-width="320">
・・・
</div>CSS
#main { width : 73%; float : left; }
#aside { float : right; }
@media screen and (max-width:320px) {
#main { width : 100%; float : none; }
#aside { width : 100% !important; float : none; }
/*frix()対象要素はfrix()によりstyle="width:"を付与されているため!importantによる上書きが必要です*/
}