「CSSでメニューなどのスクロールしたらついてくるエリアを作る1」の編集履歴(バックアップ)一覧に戻る
スクロールしても上のバーが残っている状態のCSSの設定方法です。12月1日記事
イメージ
最初はこんな感じ
スクロールしたらついてくるエリアの設定はJavaScriptでもありますし、CSSでもあります。まずは今回CSSのみで実装していく方法について考えていきます。
HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="reset.css"> <link rel="stylesheet" type="text/css" href="style.css"> <title>スクロールしたらついてくるバー</title> </head> <body> <header> <p class="middle">ナビ部分</p> </header> <div class="area"> </div> <div class="area"> </div> </body> </html>
CSS
@charset "utf-8"; /* CSS Document */ header { position: fixed; height: 50px; width: 100%; background: #F00; } p.middle { /*ちょっとお遊び。ブロック要素の中央揃え。これはなくても大丈夫です。*/ position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 100px; height: 12px; /*適当に横と縦を設定するとそのボックスが真ん中に配置される*/ } .area { /*スクロールできるように適当に長いheightを作っておきます。*/ width: 100%; height: 1000px; margin-bottom: 50px; background: #FCF; }
ぶっちゃけ簡単です。position:fixedを使えばいいだけです。リファレンスはこちらを参照してください。
途中からついてくるメニューはJavaScriptでの実装が必要になります。その点についてはCSSでメニューなどのスクロールしたらついてくるエリアを作る2で行っていきたいと思います。
以上