ハチ公|スクロールしても画面にとどまるオブジェクトを実装するjQueryプラグイン

手軽で便利なので自分用にテスト&メモ

スクロールしても流れていかずに画面上部とかにとどまり続けるオブジェクトを設定するためのjQueryプラグインです。

ハチ公 GitHub

デモ

まず普通にHTML書きます。その際、スクロールさせないオブジェクトにidやクラスを振って、セレクタで指定できるようにします。

ヘッダにjquery.jsと、このプラグインのjsを読み込みます。

スクリプトを実行します。

今回二つのボックスを指定しましたが、普通にセレクタ変えて二回実行するだけでOK。パラメータとして、位置を指定します。

スクロールさせないオブジェクトは、元のものをdisplay:hiddenして、cloneしたものをappendして位置指定してるような動きなのですが、そのappennd先をparentというパラメータで指定できます。値はセレクタとして書けばいいみたいです。省略するとbodyが使われます。

wrapperで包んでその左上基点で位置を調整できるかと思ったのですが、やってみたらどうしてもブラウザ基準になってしまいます。

既存の要素に普通にcssでfixedしたら問題なく#wrapper基準に固定されるので、appendしたものはなにか違うのかもしれません。位置指定はブラウザ基準に限られるみたいです。

でも手軽で便利。いいですね。

コメントを残す

メールアドレスが公開されることはありません。

eighteen − 16 =