jQueryの練習 / スクロールに合わせて、移動するメニュー(要素)

この投稿には最新版(続き)があります。
懲りず ) jQueryを使った画面スクロールに合わせてついてくるフローティングメニューが一応形になりまんた。

jQueryの練習
よくある”スクロールしてもついてくるメニュー”を、作ってみようと試行錯誤中。

jQueryの練習

やってる事は、position:absoluteしてある要素のtopを、スクロールした分に近づける処理の繰り返し、だと想像。
スクロール量の取得方法、要素をブラウザ上部からみた位置の取得方法、animateの使い方とイージングの追加方法等を調べて試してみた。

使ったライブラリ

練習の途中経過

[追記 / 20100517]
IE6-7でめちゃくちゃ崩れててびっくりした。
以下を追加して回避

IE6ではposition:absoluteしたメニューの次に続く要素のmargin分メニューが引きづられてた
ハックでマイナスマージンつかって戻した。
IE7はtop,leftのleftを指定しないとこれまた次の要素を基準に配置されてた(と思う)
追記ここまで。

Test page 1.スクロールに合わせて、移動するメニュー(要素):序
とりあえず動かしてみる、まずはそれからだ。
垂直スクロール量を取得するには以下の記述みたい
javascriptだと
ブラウザ毎に挙動が違うのがjavascriptの嫌な所です。

jQueryだと以下で取得できるみたい。

$(‘html’).scrollTop() はsafari3で常に0 が返されるので注意らしいです。

あとは、jQuery本体が使えるイージングはlinearとswingの二つだと知る。

Test page 2.スクロールに合わせて、移動するメニュー(要素):破
Webっぽいレイアウトの中に入れてみて高さを取得できるかテスト。:序に説明を書き足してたら、すでにヘッダのない2カラムになってたので、あんまり見栄えが変わらず意味がなさそうだけど、問題点が見えてきたのでよし。

メニューとコンテンツが被った時にどうするか、ウィンドウの高さが足りない時にどうするかなんかを考えたいところ。

Test page 3.スクロールに合わせて、移動するメニュー(要素):Q
:破だと、スクロールしてもメニューが初期のx座標を移動するのでヘッダが無い部分だと変。なのでそれを修正してみる。

現在の最終的なソースメモ(ゴミは後で削る)

js

css

html

とりあえず次は

ウィンドウのサイズが狭いとフッタに被ったりしてるので、重なる前に移動を停止させたい。
どんな計算をすればいいのだろうか。
あと、Qの次は何てタイトルにすればいいんだろうか。

参考

scrollTop() – jQuery 日本語リファレンス
jQuery の位置・サイズ関連メソッドまとめ – Cyokodog :: Diary
jQuery でブラウザの表示領域に対するサイズや位置情報を取得してみる – Cyokodog :: Diary
TO BE CONTINUED…


“jQueryの練習 / スクロールに合わせて、移動するメニュー(要素)” への1件のコメント

コメントを残す

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

You can add images to your comment by clicking here.