懲りずに ) jQueryを使った画面スクロールに合わせてついてくるフローティングメニューが一応形になりまんた。

スキップメニュー：コンテンツへ｜ナビゲーションへ

もっと快適にインターネットを活用できるブラウザ達

懲りずに ) jQueryを使った画面スクロールに合わせてついてくるフローティングメニューが一応形になりまんた。

2010年 5月 21日 |

javascript | タグ: jQuery —

Comments (1)

前回までの作りは、jsを読み込む元々のhtml(とcss)に多少依存していました。

positionで段組みしてるhtmlに、コンテンツ部分が短い時はmenuがfooterが食い込んじゃう！どうしよう！
なんて、そんな事はコーディングする時にどうにかする問題で、javascriptでどうにかしなきゃならんもんではないだろうし
同じように、メニューを動くようにする為に、予めpositionを仕込んでおかなければならないなんてのも良くないかと。

今回は、元々あるレイアウト(htmlやcss)になるべく手を加えずとも動くようにしたい。を念頭にやったので、floatで組んだページも、positionで組んだページも、フッターの有無に関わらず使えるように出来たと思う。
メニューとフッターのidを合わせるか追加する必要はあるけれど。

: floatレイアウトにフローティングメニューを追加のサンプル
: positionレイアウトにフローティングメニューを追加のサンプル

作成したjavascript
floatingmenu-v2.0.2.js

あるぇ？
“続きを読む”以降の文章が全部なくなってる…なぜ…

使い方

次の2つのファイルをダウンロード

イージングを追加したいなら以下も。

jQuery Easing Plugin

hemlの<head>内で読み込む

&lt;script type=&quot;text/javascript&quot; src=&quot;_js/jquery-1.4.2.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;_js/floatingmenu-float-a.js&quot;&gt;&lt;/script&gt;

floatingmenu-v2.jsを開くと最初に設定する部分があるので適当に書き換える。

//メニューの上部に余白を設けるなら入力 / 単位px
  offsetY = 10;
//absoluteでコンテンツ部分が短い時のメニューとフッターの余白 / 単位px
  minMargin = 10;
//処理時間 (ミリ秒)  / 0だとposition:fixedのようになる、チラつくけど
  duration = 900;
//移動させるメニューのid
  _foName = '#nav';
//positionで組んだレイアウトは「0」 floatで組んだレイアウトは「1」
  _navRelative = 1;
//フッター部分のid
  _ftName = '#footer';
//イージングタイプ / 使いたいのがなければjQuery Easing Pluginを追加してもいい
  easingSet = 'swing';

つまったところや、よく分からない部分

cssのプロパティの記述が違う部分がある？
margin-top は marginTop とも書ける？
いやmarginTopはcssじゃないのか、なんだろ？

cssを複数指定する方法

$("#example").css('background', 'tomato').css('height','100px').css('text-align','center');
$('#example').css({'height' : '100px','text-align' : 'center','background' : 'tomato'});

なので作成したfloatingmenu-v2.0.1.jsの以下の部分を

$(_ftName).css('position', 'absolute').css('width', ftWidth).css('top', navHeight + navSetY + minMargin);

~~こう書いたら上手く動かなかった~~と思ったら動いた。あるぇ?

$(_ftName).css({
'position' : 'absolute',
'width': ftWidth,
'top': navHeight + navSetY + minMargin
});

上記確認をしていて不具合を発見 v2.0.2に修正した。
positionを使ってでfooterがnavと重なるのを解決させると、
footerの下に何か要素があった場合、今度はそれがnavに食い込んでしまうので
footerにmargin-topをつけてfooterの下の要素も押し出すようにした。
そうした所bodyのheightが伸びるから、navがスクロールする場合があった。
flagをつけてfooterを伸ばした時はnavを動かさないようにした。

console.log() の位置によって挙動が変わる？
出来ないと思ってた事が console.log を削除すると動く。

pxがつく要素からpxを取るには

parseIntを使う。

#example{
margin-top:100px;
}

$('#example').css('margin-top');
//100px

parseInt($('#example').css('margin-top'));
//100

parseIntを使えば文字列を数値に変換できるので、以下の記述では「300+300+”px”」と認識されます。最初の+は数値と数値の間にある算術演算子の+なので足し算として扱われて「600」になり、次の+で文字列の「px」と連結されて、「600px」を設定できます。
parseInt($("#navi .pageWrap").css("margin-left"))+300+"px"

ASCII.jp：jQueryで作る画像ギャラリーのチュートリアル｜Web制作の現場で使えるjQuery　UIデザイン入門

1件のコメント »

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

ピンバック by jQueryの練習 / スクロールに合わせて、移動するメニュー(要素) « 乱雑モックアップ — 2010年5月21日 @ 23:17

この投稿へのコメントの RSS フィード。 TrackBack URL

コメントする

乱雑モックアップのフィード

乱雑モックアップらんざつ[乱雑] （名・形動）[文]ナリ入り乱れていること。乱れていて秩序がないこと。また、そのさま。