nicepaper @ ウィキ
nicepaper @ ウィキ

スクロールしても上のバーが残っている状態の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で行っていきたいと思います。

以上

「CSSでメニューなどのスクロールしたらついてくるエリアを作る1」をウィキ内検索
最終更新：2015年12月04日 12:05
添付ファイル