スクロールしても上のバーが残っている状態の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での実装が必要になります。その点についてはjQueryとCSSでメニューなどのスクロールしたらついてくるエリアを作る2で行っていきたいと思います。
以上
