CSSでヘッダーをページ上部に固定表示

ヘッダーを固定表示し、記事本文やタブボックスなどが上手く表示されるようにする方法です。当サイト作者が作成した次のテンプレートについてです。

2012年10月27日追記:当ページは記載内容が古いため、改訂版の次のページをご覧ください。

テンプレートのHTMLを編集

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

  2. 読み込む外部jsファイルを変更します。

  3. 120604-script2.js120711-script2.jsに変更します。

  4. 120525-script.js120711-script.jsに変更します。

テンプレートのCSSを編集

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

    
    /*header固定表示に伴う調整 http://customtemplate.blog112.fc2.com/blog-entry-37.html */
    #header{position:fixed;width:958px;}
    #content,#sidebar{top:80px;margin-bottom:80px;}
    #sidebar-toggle-on{top:80px;}
    #tbox{top:94px;height:90%;}
    

デモページ

  1. デモページです。

  2. デモページで画面をスクロールすると、headerが固定されているのを確認できます。

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

IE7以下非対応

  1. IE6では固定されていません。

  2. IE7では、header全体が右にずれています。

  3. IE6およびIE7共にこのような状態ですが、記事本文閲覧には問題ないかと思います。

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

  5. IE6やIE7の不具合をうまく解消できましたら、ご連絡いただけるとありがたいです。

以上です。

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