8

グローバルナビをスクロール時に固定する方法

グローバルナビをスクロール時に固定する方法

グローバルナビゲーションの仕様は、その時の流行によって左右されやすいものです。その中でも、安定してそのスタイルが良く扱われている「固定ナビゲーション」の指定方法をご紹介しておきます。今回はjQueryを使って、グローバルナビゲーションのデフォルトの位置を取得し、それ以上の値がスクロールされたら上部に固定するというものを作成していきます。




まずはサンプルを確認してみてください。

DEMO

スクロールをすると横に5つ並んだグローバルナビゲーションが上部に固定されるのが確認できると思います。

サンプルを見ながら確認していきましょう。

HTMLを記述

まずは、サンプルにも使っている横に5つのボタンを配置した場合のhtmlコードを記述します。

 ナビを「div#globalNavi」で囲っています。

 

CSSを記述

「div#globalNavi」を横幅100%指定し、背景を#333にしています。
「div$globalNavi ul li 」aと「div$globalNavi ul li a:hover」にそれぞれ背景色やpadding設定などをしてボタンにしています。

 

CSSを追記

肝心な部分のCSSを追記します。「.fixed」に「position:fixed(固定)」、「top: 0()トップからの位置は0px」、横幅100%、z-index: 10000(大きな数値を任意で指定)。

 

jQueryの読み込みとJavaScriptを記述

 

変数「nav」を宣言し「#globalNavi」を代入、変数「offset」に変数「nav=#globalNavi」の位置を代入。「.scroll」した際に、scrollTop(スクロールした距離)と、はじめの「#globalNavi」のTopからの距離を比較して、スクロール値が大きければ、変数「nav=#globalNavi」に対して「.fixed(クラスfixed)」を追加し、値が小さければ、変数「nav=#globalNavi」から「.fixed(クラスfixed)」を削除するという文になります。

 

簡単な図で表すと、以下のようになります。

koubun

ちょっとややこしくなってしまいましたが、簡単に言うと「#globalNavi」の位置を確認して、固定するかどうかを判断しているということになります。

 

ついでに、今回使用したjQueryのイベントなどを覚えておくと良いでしょう。

offset() ドキュメント上での表示されている位置(top,left)を戻り値として返します。
scroll(fn) 文書がスクロールした際にscrollイベントが呼び出されます。
addClass(class) 指定した要素に、CSSクラスを追加します。
removeClass(class) 指定した要素から、CSSクラスを削除します。

以上になります。

8 Comments

  1. はじめまして。webデザインの勉強をしています。
    mororecoさんの記事は説明やサンプルがとてもわかりやすく、初心者にもチャレンジしやすいので助かります。
    こちらのテクニックを自分のサイトで利用させて頂きたいのですが、ライセンスどのようになっているのでしょうか?商用サイトなどでの利用は可能でしょうか。
    これからも応援しています。

    • 「R」さん
      コメントありがとうございます。
      ライセンスは基本的にフリーですので、自由にサイトでお使いください。
      今後ともご愛顧頂けたら幸いです^^

  2. MORORECOさんへ

    はじめまして、固定ナビゲーションの実装方法を調べていて貴サイトにたどり着きました。
    記事をつくってくださりありがとうございます!
    jQueryは全く素人ですが、MORORECOさんのおかげで上記の内容は理解ができました!

    そんな中、当記事のナビゲーションを真似たくて取り組んでおりますが…どうにもうまくいきません。具体的には「#globalNavi」までスクロールが達する前にメニューがトップに固定されてしまいます。

    わからないなりにいろいろ手を尽くしたのですが…うまくいきません。
    恐れ入りますが、何かお心当などアドバイスをいただくことはできますでしょうか?
    差し出がましいご相談で申し訳ございません。

    • 「Atsushi」さん
      コメントありがとうございます。

      「#globalNavi」までスクロールが達する前にメニューがトップに固定されてしまう・・・
      とありましたが、ブラウザの表示倍率は「100%」でも同じような現象が起きておりますでしょうか?

      • MORORECOさん

        ご返信いただきありがとうございます!
        仰ってくださったブラウザの表示倍率について、100%ですがすぐに固定されてしまいます…
        ちなみに、私はMacのsafariとchromeで見ておりますが、safariだとそのような現象が起こり、chromeだと大丈夫です…。MORORECOさんのDEMOはもちろん、どちらでも大丈夫です。

        もしも何かお心当たりがございましたら、教えていただけると嬉しいです。

  3. Pingback: 固定ヘッダー

コメントを残す

mororeco > jQuery > グローバルナビをスクロール時に固定する方法