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

jQuery練習中

二転三転中、最初の見極めが甘いんだろうなぁ
作って試してみると、じゃあこうゆう時はどうなる?こうなったら?が出てくること出てくること。
あーしたい、こーしたいって欲も。

前回の練習以降に変更した事。

_1.footerと被った部分の処理とあえて移動させない処理。
ウインドウサイズをちょこちょこ縮めていくと(普通はそんな使い方しないけど)メニューとフッターが被る。
処理を1.ヘッダーが画面内にある場合 / 2.フッターが画面内にある場合 / 3.両方画面内にない場合の3段階に分けて、メニューが移動する位置などを決めるようにした。

_2.コンテンツの中身が全然ないhtmlの場合
4.ヘッダーもフッターも同じ画面にある場合はどうなるの?と思って試してみた。
コンテンツ部分を短くしたら(このページは現在製作中です的な長さ、公開するなよって話)不具合が。

_3.コンテンツの中身が全然ないhtmlの場合:修正
短い場合の修正として、コンテンツの高さを無理やり広げた。
そうしたところ、今度はbodyの高さを取得する順番なんかが狂ってしまった。
スクロールに合わせて移動するメニューなのに移動させない処理を追加

_4.javascript外部化、要素名を変数化
いままでのままだと、移動する要素ややヘッダーやフッターの名前を変更したい時に書き換える部分が沢山あるので変数にした、速度とかも。あとhead内の記述から.jsにした。

続きを読む