記事を見て興味を持った方が同じカテゴリの記事を参照する際のユーザビリティの向上と導線強化のため、スクロールに追従するトップメニューを導入しました。今回は参考にしたサイトのコードほぼそのまんまなので、簡単に解説を加える程度で進めていきます。当サイトのメニュー作成にあたってヘッダー部に固定されたメニューと、任意のスクロールポイントで出現するメニューの2つを用意しました。見かけるのは下にスクロールすると消えるものですが、あまり頻繁に動きすぎると閲覧していて気が散ると思ったので任意のスクロールポイントだけの制御にしてあります。メニューを2つ用意することでメンテナンス性も悪くなりコードも冗長になりますが、自分のイメージした動きにするにはこの方法しか思い浮かばなかったのもありますが、スクロール時は別の情報メニューを用意できるメリットがあります。ある記事を閲覧した時、その記事のカテゴリとタグを表示したり、アーカイブならカテゴリの階層メニューを表示したりなど。いう訳で今回紹介するメニューは「通常は消えていて任意のスクロールポイントで出現を制御するメニュー」になります。メニューの用意とCSS記述CSS[crayon-5e59e7de29bdf211898078/]特に難しいことはないですが一応ポイントを書いておきます。・top:-45pxで高さ+box-shadow分上に隠しておく・transitionでアニメーション処理HTML[crayon-5e59e7de29be5185825683/]htmlはクラス指定だけでOKです。jquery設置[crayon-5e59e7de29be7393168521/]作業フローは下記のとおり。1行目:・menuHightにメニューの高さを代入2行目:スクロールイベントが発生したら処理開始3-4行目:500px以上スクロールされたらtop:0にしてメニュー表示4-5行目:そうでなければtopにメニューの高さ(+box-shadowの5px)上げて隠す制御が任意のスクロールポイントだけなので非常にシンプルです。例では汎用性を考慮してあってメニューの高さを代入していますが、そのまま数値を入れてももちろん動きます。ちなみに参考にしたサイトでもあるようにスクロールの向きを判別して出し入れしたい場合は処理が煩雑になります。上にスクロールすると出現して、下にスクロールすると消えるメニュー[crayon-5e59e7de29be9893614817/]まとめ動きが楽しい「トップへ戻る」ボタンも設置していますが、直接メニューへアクセスできる追従型メニューのほうが利便性は高いんじゃないかと思います。かさばるメニューだとスペースを圧迫してしまうので、トップの固定メニューは大きく見やすいもの、追従型メニューは簡易的なもの、という使い分けが本来の用途かなーと思います。そこまで作っていませんけどね。あとはこれくらいのシンプルなコードならjquery初心者(自分も含めて)にはイベントハンドラの良い勉強になるのではないでしょうか。Cancel)次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。コメントデータの処理方法の詳細はこちらをご覧ください。