ヘッダーやナビをページ上部に簡単に固定できるjQueryプラグインClingifyのご紹介です。
特徴
同様なスクリプトはいろいろありますが、こちらの特徴は…
- 既存マークアップにインラインスタイルを使わない→!importantで上書きしない
- 全てCSSクラスで制御される
少々のデフォルトスタイルは設定しているが、好みのCSSフレームワークで動作するようCSSクラスをカスタマイズできる - ページ内に複数設置可能
ターゲットまでスクロールすると画面固定位置で表示される - clingifyするターゲットは、プレースホルダーおよびラッパーとしてdivでwrapされる（2重にdivでwrapされる）
→プレースホルダーdivには高さが設定され、画面に固定されたときのレイアウト崩れを防ぐ - レスポンシブレイアウト考慮
→オプションでブレークポイントを設置することにより、モバイル・タブレットでの動作を無効にできる - スクロールにより画面固定位置へのアタッチやデタッチ、および画面リサイズのイベントによるコールバック関数を設定できる
- リサイズやスクロールイベントは、パフォーマンス向上のため考慮・調整済み
オプションでもスロットル量を設定できる
本家サイトはこちら
デモ：Clingify Demo
ソース：theroux/clingify
設置
clingify.cssとjquery.clingify.jsを読み込みます。
※jQuery必須。バージョン1.7+
html<link href="...path_to_file.../clingify.css" rel="stylesheet">
...
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="...path_to_file.../jquery.clingify.js"></script>
使い方
固定したいターゲットをセレクタに指定。
JS$(function() {
$('.some-selector').clingify();
});
オプション
ブレークポイント
■breakpointHeight
画面高さのブレークポイント（デフォルト0） この値より小さい場合に無効
■breakpointWidth（breakpoint）
画面幅のブレークポイント（デフォルト0） この値より小さい場合に無効
パフォーマンス
■throttle
スクロール・リサイズイベント発火頻度（デフォルト50） ミリ秒単位
CSSセレクタ
■extraClass
ターゲットのプレースホルダーとラッパーdivにCSSクラスを追加設置する（div2つとも同じextraClassが追加される）
■lockedClass
ターゲットが固定されたときにラッパーdivに追加されるcssクラス（デフォルトjs-clingify-locked）
■placeholderClass
プレースフォルダのCSSクラス（デフォルトjs-clingify-placeholder）
■overrideClass
このクラスがラッパーdivにある場合、デタッチされない（デフォルトjs-clingify-permalock）
→一度固定されたら解除されない
■wrapperClass
ターゲットをwarpしたラッパーdivクラス（デフォルトjs-clingify-wrapper）
コールバック関数
■detached
デタッチ直前に発火するコールバック
■locked
ロック（画面固定）直前に発火するコールバック
■resized
画面リサイズイベント直後に発火するコールバック
※画面固定している／していないにかかわらず発火する
（追記）アドバンスモード
■scrollingElem
スクロールイベントのリスナーをアタッチするエレメント（デフォルトwindow）
※offcanvas要素のスクロールに便利
■fixed
true : position:fixed となる（デフォルト）
transform : TranslateYを使用して再配置する
