jQueryでグローバルナビゲーションをページ上部に固定表示

更新
2013年03月03日(日)

jQueryでグローバルナビゲーションのcloneを作成し、ページ上部に固定表示する方法です。当サイト作者が作成した次のテンプレートについてです。

2013年3月3日(日)追記:このページの内容は過去ver用です。ver1.3.0~1.4.1ではHTML編集内のコメントアウト参照、ver1.5.0はJavaScriptによる便利機能をデフォルトからカスタムする方法参照。

テンプレートのHTMLを編集

  1. customtemplate (ver1.1.1)のデフォルト状態からのカスタムです。

  2. ver1.1.1:テンプレートのHTML編集で</head>の上に次のコードを挿入します。挿入場所は今後のメンテナンス性を考えて一応指定しています(2012年7月25日にコードに加筆しIE7以下を非対象にしました)。

    
    <script type="text/javascript">
    $(function(){
    if(typeof document.body.style.maxHeight!="undefined"&&(!/*@cc_on!@*/false||document.documentMode>=8)){
    $("#page").prepend($("#nav-wrapper").clone().css("position", "fixed").css("z-index", "95").css("width", "958px"));
    }
    });
    </script>
    
  3. ver1.2.0:上記コードの太字部分だけ定義追加用スペース2 開始の3行下あたりに追加します。太字部分だけの意味は「scriptタグ部分はコピペしないで」ということです。

テンプレートのCSSを編集

  1. /*■§7 ピクトグラム の上に次のコードを挿入します。挿入場所は今後のメンテナンス性を考えて一応指定しています。

    
    /*グローバルナビゲーション再表示部分に隠れない調整*/
    #sidebar-toggle-on{top:24px;}
    #tbox{top:38px;}
    

デモページ

  1. デモページです。

  2. デモページで画面をスクロールすると、固定されたグローバルナビゲーションがページ上部に表示されます。

  3. また、デモページ内のこのページの目次を常に表示するボタンをクリックすると、固定されたグローバルナビゲーションとタブボックスが重ならないのを確認できます。

IE7以下非対応

  1. IE7以下ではcloneが作成されないようにしています。IE7以下にも対応させると次の不具合が確認されます。

  2. IE6では固定されません。

  3. IE7では、このページの目次を常に表示するボタンをクリックすると、cloneのグローバルナビゲーションが右にずれます。表示を戻すとcloneも戻ります。

  4. IE6およびIE7共にこのような状態です。記事本文閲覧には問題ないかと思いますが、それならcloneが無いほうがよさそうなのでそうしました。

  5. なお、IE8では不具合を確認していません。

  6. ちなみに、加筆前のデモページを残しておきます。IE7以下で表示するとその状況を確認できます。

  7. コメントアウト書き方やブラウザ判定方法(html,css,javascript,php) | 運命

以上です。

関連記事
(この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)
スポンサードリンク
(この一行は、各ページ下部に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)