mororecoグローバルナビゲーションの仕様は、その時の流行によって左右されやすいものです。その中でも、安定してそのスタイルが良く扱われている「固定ナビゲーション」の指定方法をご紹介しておきます。今回はjQueryを使って、グローバルナビゲーションのデフォルトの位置を取得し、それ以上の値がスクロールされたら上部に固定するというものを作成していきます。サンプルを確認してみてください。DEMOスクロールをすると横に5つ並んだグローバルナビゲーションが上部に固定されるのが確認できると思います。サンプルを見ながら確認していきましょう。HTMLを記述まずは、サンプルにも使っている横に5つのボタンを配置した場合のhtmlコードを記述します。href="#">Menu5</a></li></ul></div>ナビを「div#globalNavi」で囲っています。「div#globalNavi」を横幅100%指定し、背景を#333にしています。a:hover」にそれぞれ背景色やpadding設定などをしてボタンにしています。肝心な部分のCSSを追記します。10000(大きな数値を任意で指定)。{nav.removeClass('fixed');}});});</script>変数「nav」を宣言し「#globalNavi」を代入、変数「offset」に変数「nav=#globalNavi」の位置を代入。「.scroll」した際に、scrollTop(スクロールした距離)と、はじめの「#globalNavi」のTopからの距離を比較して、スクロール値が大きければ、変数「nav=#globalNavi」に対して「.fixed(クラスfixed)」を追加し、値が小さければ、変数「nav=#globalNavi」から「.fixed(クラスfixed)」を削除するという文になります。簡単な図で表すと、以下のようになります。ややこしくなってしまいましたが、簡単に言うと「#globalNavi」の位置を確認して、固定するかどうかを判断しているということになります。ついでに、今回使用したjQueryのイベントなどを覚えておくと良いでしょう。ドキュメント上での表示されている位置(top,left)を戻り値として返します。文書がスクロールした際にscrollイベントが呼び出されます。指定した要素に、CSSクラスを追加します。指定した要素から、CSSクラスを削除します。関連する記事はこちらです。Comments返信2016年6月8日Rはじめまして。webデザインの勉強をしています。mororecoさんの記事は説明やサンプルがとてもわかりやすく、初心者にもチャレンジしやすいので助かります。こちらのテクニックを自分のサイトで利用させて頂きたいのですが、ライセンスどのようになっているのでしょうか?商用サイトなどでの利用は可能でしょうか。これからも応援しています。返信2016年6月9日mororeco「R」さんコメントありがとうございます。ライセンスは基本的にフリーですので、自由にサイトでお使いください。今後ともご愛顧頂けたら幸いです^^返信2016年10月14日AtsushiMORORECOさんへはじめまして、固定ナビゲーションの実装方法を調べていて貴サイトにたどり着きました。記事をつくってくださりありがとうございます!jQueryは全く素人ですが、MORORECOさんのおかげで上記の内容は理解ができました!そんな中、当記事のナビゲーションを真似たくて取り組んでおりますが...どうにもうまくいきません。具体的には「#globalNavi」までスクロールが達する前にメニューがトップに固定されてしまいます。わからないなりにいろいろ手を尽くしたのですが...うまくいきません。恐れ入りますが、何かお心当などアドバイスをいただくことはできますでしょうか?差し出がましいご相談で申し訳ございません。返信2016年10月24日mororeco「Atsushi」さんコメントありがとうございます。「#globalNavi」までスクロールが達する前にメニューがトップに固定されてしまう・・・とありましたが、ブラウザの表示倍率は「100%」でも同じような現象が起きておりますでしょうか?返信2016年10月25日AtsushiMORORECOさんご返信いただきありがとうございます!仰ってくださったブラウザの表示倍率について、100%ですがすぐに固定されてしまいます...ちなみに、私はMacのsafariとchromeで見ておりますが、safariだとそのような現象が起こり、chromeだと大丈夫です...。MORORECOさんのDEMOはもちろん、どちらでも大丈夫です。何かお心当たりがございましたら、教えていただけると嬉しいです。ワードプレス、プラグインが無くても出来る事は沢山あるんだよ。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。reserved.当サイト内の文章・画像等の内容の無断転載及び複製等の行為はご遠慮ください。