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

  • このエントリーをはてなブックマークに追加
  • LINEで送る

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

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

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

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

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

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

使い方

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

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

hemlの<head>内で読み込む
[html]&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;[/html]

floatingmenu-v2.jsを開くと最初に設定する部分があるので適当に書き換える。
[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’;[/js]

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

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

cssを複数指定する方法

[js]
$("#example").css(‘background’, ‘tomato’).css(‘height’,’100px’).css(‘text-align’,’center’);
$(‘#example’).css({‘height’ : ‘100px’,’text-align’ : ‘center’,’background’ : ‘tomato’});
[/js]

なので作成したfloatingmenu-v2.0.1.jsの以下の部分を
[js]
$(_ftName).css(‘position’, ‘absolute’).css(‘width’, ftWidth).css(‘top’, navHeight + navSetY + minMargin);
[/js]
こう書いたら上手く動かなかったと思ったら動いた。あるぇ?
[js]$(_ftName).css({
‘position’ : ‘absolute’,
‘width’: ftWidth,
‘top’: navHeight + navSetY + minMargin
});[/js]

上記確認をしていて不具合を発見 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を使う。
[css]
#example{
margin-top:100px;
}
[/css]
[js]
$(‘#example’).css(‘margin-top’);
//100px

parseInt($(‘#example’).css(‘margin-top’));
//100
[/js]

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

parseInt($("#navi .pageWrap").css("margin-left"))+300+"px"

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

  • このエントリーをはてなブックマークに追加
  • LINEで送る

SNSでもご購読できます。

コメント

  1. e.c. より:

コメントを残す


You can add images to your comment by clicking here.