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

前回までの作りは、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>内で読み込む

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

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

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

cssを複数指定する方法

なので作成したfloatingmenu-v2.0.1.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を使う。

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

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


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

  1. こんにちは。
    とても便利なプログラムを多数公開して頂いてありがとうございます。
    そこでぜひ、floatingmenu-v2.0.2.jsを使わせて頂きたいと思っているのですが、ライセンスはどのようになっていますでしょうか?
    プログラム内や記事にライセンスに関する表記が見つけられなかったため、念のため問い合わせさせていただきます。
    お忙しいところ大変お手数ですが、ご回答頂けますと幸いです。
    よろしくお願い致します。

コメントを残す

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

You can add images to your comment by clicking here.