ついてくるヘッダやメニューを簡単に実装するjQueryプラグインをつくってみた

よくあるスクロールしてもついてくるヘッダやメニューを簡単に実現するものを作ってみました。

position:fixedのみでよかろうと言う話もあるかもしれませんが、親要素以降ついてこなかったり、対象の要素がwindowの縦サイズを超えてしまっている場合には要素全体までスクロールして固定する、と言った処理を実装しております。

ソースコードはGitHubで公開しています。

使い方

swrfixed([options])

ページのスクロール位置が要素を超えたときに、要素をページに固定表示させます。
親要素を超えての表示はされません。

options
zIndex 対象の要素が固定されたときに設定するz-indexを指定します。
デフォルトは10です。
scroll トリガーとなるスクロール位置が設定できます。
デフォルトは0です。
top 対象の要素の高さが固定されたときのtopの位置を指定します。
デフォルトは0です。
bottom 対象の要素の高さがwindowの縦サイズより大きいときは、要素の一番下がページ下部で固定されます。
その場合のbottomの位置を指定します。
デフォルトは0です。
onFixed 要素の固定が開始される直前に呼び出される関数が設定できます。
falseを返すと固定は開始されません。
詳しくはonFixedを参照してください。
onStatic 要素の固定が解除される直前に呼び出される関数が設定できます。
falseを返すと固定は解除されません。
詳しくはonStaticを参照してください。
onResize windowがリサイズされた直後に呼び出される関数が指定できます。
詳しくはonResizeを参照してください。

onFixed(element, scroll, options)

要素の固定が開始される直前に実行されます。

  • element
    • 要素のオブジェクト
  • scroll
    • 現在のスクロール位置

onStatic(element, scroll, options)

要素の固定が解除される直前に実行されます。

  • element
    • 要素のオブジェクト
  • scroll
    • 現在のスクロール位置

onResize(element, scroll, options)

windowがリサイズされた直後に呼び出されます。

  • element
    • 要素のオブジェクト
  • scroll
    • 現在のスクロール位置

実装例

HTML
<div class="swrfixed"></div>
JavaScript
$(".swrfixed").swrfixed({
    zIndex: 100,
    bottom: 15
});

デモページ

今わかってる問題点と今後なおしたいところ

  • 固定フッターメニュー対応
  • レスポンシブなデザインのときページ表示後にwindowのリサイズとかすると変な動きになります。

コメントを残す