看板のような役割を含んでいます。上部に固定されているタイプや、スクロールすると、メニューバーが上部にくっつくタイプ等、いろんな動きをさせることができるようです。下にスクロールしている時は表示されず上にスクロールした時に表示されるという、記事を読む際に、メニューバーが邪魔にならないような動きをさせています。必要な時だけ助けてくれるヒーローのような。そこで今回は、そのメニューバーの仕組みについて紹介したいと思います。まとめメニューバーの形作り最初に、HTMLでメニューバーの枠組みを、CSSでメニューバーのデザインを作っていきます。HTMLHTMLの構造は非常に簡単です。Blogramでは、メニューバーはヘッダーの中にあるため、ヘッダーをそのまま動かす様にしています。その為、HTMLはヘッダーだけ作れば大丈夫です。id="header"></header>ちなみに、CSSは自分の好きな色や形にしちゃって下さい。参考までに、BlogramのヘッダーCSSは以下の通りです。9999;}ただ背景を青くして、文字色を白にしています。ポジション要素だけは忘れずに指定してくださいね。一つずつ作っていきます。次に、変数を定義しましょう。0;変数headerMenuを定義し、ヘッダーを変数に代入しています。次に、showMenuにfalseを代入しています。これは、条件分岐で使うための定義です。現在位置の数値は0とですよー!って定義してます。要するに、基準点になる変数ですね。次に、関数を定義します。中の処理を実行するためのものです。消したりするために必要な、スクロール動作を取得するために必要な定義ですね。メニューバー以外にも、いろんな使い道がありそうです。処理まずは、現在位置からscrollした際の距離を引き、その値を変数positionDiffに代入します。$(window)は表示している画面全体を指します。今画面に表示されている一番上の位置が、ページ全体の中で、どの位置なのかを取得するコードです。画像で見てもらったほうがわかりやすいかなと思います。現在位置(変数currentPosition)から$(window).scrollTop()の値を引いて、その結果を変数positionDiffに代入します。これは、上下どちらにスクロールしたかを判別するためです。$(window).scrollTop();その後、変数currentPositionに今の位置を代入します。条件分岐いよいよ条件分岐に入っていきます。以下の条件でヘッダー(メニュー)を表示させるようにします。上にスクロールした時ページの一番下に来た時そして以下の条件では表示させません。下にスクロールした時では早速スクリプトを書いていきましょう。$(document).height())、この2つの条件に合致する場合に、ヘッダーをfadeIn表示させます。true;}headerMenu.fadeIn();で、ヘッダーメニューを表示させます。表示させるために、fadeInを使っています。それ以外の時には表示させない。false;};これで、スクリプトは完成になります。});まとめすごく長くなってしまいましたね。動きを直せるような紹介をさせてもらいました。よかったら参考にしてみてください。高井圭介WEB制作・動画制作・ブログを使ったマーケティングについて学んできました。現在はプログラミング勉強中です。僕が学んだ「パソコン1台で自立できる知識」を共有して、一緒に成長できる仲間を募集中です。