ヘッダーを固定するスクリプトClingify

Clingify

ヘッダーやナビをページ上部に簡単に固定できる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を使用して再配置する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA