「CSSでメニューなどのスクロールしたらついてくるエリアを作る1」の編集履歴（バックアップ）一覧はこちら
追加された行は緑色になります。
削除された行は赤色になります。
スクロールしても上のバーが残っている状態のCSSの設定方法です。12月1日記事
~
~
イメージ
~
最初はこんな感じ
&image(width=400,scroll001.png)
スクロールしても
&image(width=400,scroll002.png)
こんな感じに上のバーが残る
~
~
目次
#contents
~
~
----
~
*スクロールしたらついてくるものの実装方法
スクロールしたらついてくるエリアの設定は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を使えばいいだけです。リファレンスは[[こちら:http://www.htmq.com/style/position.shtml]]を参照してください。
途中からついてくるメニューはJavaScriptでの実装が必要になります。その点については[[CSSでメニューなどのスクロールしたらついてくるエリアを作る2]]で行っていきたいと思います。
~
~
以上
スクロールしても上のバーが残っている状態のCSSの設定方法です。12月1日記事
~
~
イメージ
~
最初はこんな感じ
&image(width=400,scroll001.png)
スクロールしても
&image(width=400,scroll002.png)
こんな感じに上のバーが残る
~
~
目次
#contents
~
~
----
~
*スクロールしたらついてくるものの実装方法
スクロールしたらついてくるエリアの設定は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を使えばいいだけです。リファレンスは[[こちら:http://www.htmq.com/style/position.shtml]]を参照してください。
途中からついてくるメニューはJavaScriptでの実装が必要になります。その点については[[jQueryとCSSでメニューなどのスクロールしたらついてくるエリアを作る2]]で行っていきたいと思います。
~
~
以上
