Fixed-sticky
よくグローバルナビゲーションなどで見かける Sticky要素（スクロール後にウィンドウ上部に固定されるやつ）を手軽に実装できるjQueryの紹介です。
まだ対応にばらつきがあるposition: sticky;に対して、パッチを当てるようなスクリプトとなっています。stickyが使えるブラウザに対しては何もせず、未実装のブラウザに対してのみ働きます。
用意するもの
まずはGithubからファイル一式をダウンロードします。最低限必要なものは下記のとおりです。
<script src="js/jquery.js" type="text/javascript"></script> <script src="js/fixedsticky.js" type="text/javascript"></script>
ファイル一式の中にはfixedsticky.cssとして下記のような記述が入っていますので、実際に使用する際はこちらの記述を使用しているcssに貼り付けるでも良いと思います。
.fixedsticky {
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
position: sticky;
}
/* When position: sticky is supported but native behavior is ignored */
.fixedsticky-withoutfixedfixed .fixedsticky-off,
.fixed-supported .fixedsticky-off {
position: static;
}
.fixedsticky-withoutfixedfixed .fixedsticky-on,
.fixed-supported .fixedsticky-on {
position: fixed;
}
.fixedsticky-dummy {
display: none;
}
.fixedsticky-on + .fixedsticky-dummy {
display: block;
}
基本的な使い方
使い方は至極シンプルで、下記のように指定するだけです。
<div id="任意のID" class="fixedsticky">固定される要素</div>
$("#任意のID").fixedsticky();
ひとつ気をつける必要があるのは、このスクリプトはあくまでstickyが効かないブラウザへの補助であるためclass=”fixedsticky”が記述されていない要素に対して.fixedsticky();をつけても何も起こりません。
stickyを実現するための記述をfixedstickyのclassに、固定する個別の位置情報を別のidやclassに書いていくとカスタマイズしやすいのかなと思います。
