スクロール後にはウィンドウに固定される要素を実装できる Fixed-sticky の使い方

posts_photo

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に書いていくとカスタマイズしやすいのかなと思います。


いちばんよくわかるHTML5&CSS3デザインきちんと入門