概要

例えば横方向はposition:static、縦方向はposition:fixedのように見える動きを提供します。

ちょっと言葉だけでは分かりづらいので、デモをご覧ください。

ダウンロード

基本的な使い方

.gpFloatX()で横方向に、 .gpFloatY()で縦方向にのみスクロールするようになります。

$(elem).gpFloatX();
$(elem).gpFloatY();

デモ

デモ1 : 基本的なもの

Demo 1

  • 上部のメジャーは、画面を縦にスクロールしても移動しませんが、横にスクロールした場合は一緒にスクロールします。
  • 左部のメジャーも同様です。
  • 下部のフッターは座標計算時にスクロール量を確認し、もし要素ブロックの右端までスクロールしていたら、それ以上はスクロールしません。

デモ2 : バルーン

Demo 2

  • プラグインとしては当然ですが、複数の要素をまとめて指定する事もできます。
  • 座標計算の再にスクロール量より一定の割合で変化させる事で、ゆっくりスクロールさせる事ができます。
  • ゆっくりスクロールを複数あわせると、なんだか三次元な感じです。

リファレンス

.gpFloat([settings])

  • settings … {Object} 設定。以下のキーと値を持てる:
    • direction … {String} 移動可能な方向。"x", "y", "xy"のいずれか。
    • getLeft(originalX, scrollLeft, $el)… {Function} 横方向の座標を計算する関数。
      • originalX … {Number} 要素の初期位置。
      • scrollLeft … {Number} 現在のスクロール量。
      • $el … {HtmlElement} 対象要素。
      例えば初期処理と同じ値にする場合(無意味ですが)、次のようにします:
      getLeft: function(originalX, scrollLeft, $el) {
          return originalX - scrollLeft;  // default
      }
      
    • getTop(originalY, scrollTop, $el) … {Function} 縦方向の座標を計算する関数。getLeftと同様。

.gpFloatX([settings])

  • settings … {Object} 設定。directionが必ず"x"になる意外は、 .gpFloat([settings])のsettingsと同じ。

.gpFloatY([settings])

  • settings … {Object} 設定。directionが必ず"y"になる意外は、 .gpFloat([settings])のsettingsと同じ。

その他

ライセンス

  • MIT License
    • 無償で利用できます。
    • 転載や改造、再配布が可能です。
    • コード内に記載の著作権表示は変更できません。
    • どのような問題が発生しても、一切の保証はありません。

利用時に連絡は不要ですが、もしご連絡頂ければ、利用実績として掲載させて頂くかもしれません。

対応ブラウザー

  • IE 8+
  • Firefox
  • Chrome
  • Safari
  • Opera

リポジトリ

更新履歴

2011/10/18 – 1.0
  • 公開