ヘッダーを一番上に固定させて常に見えるようにするにはどうすればいいでしょうか。

例えば以下のようなページでスクロールすると画像の上にヘッダーが来て、一番上で止まり、スクロールしていってもそこでずっと見えるようにしたいのですが可能でしょうか。

http://www.ukai.co.jp/toriyama/

行動規範の内容に同意します

回答1件

ベストアンサー

けっこう難しいですが頑張ってみてください。
下記の感じでどうでしょう。

html
1<div id="wrapper">
2  <header>
3    <p>上の表示</p>
4  </header>
5  <nav class="noFix">
6    <ul>
7      <li>NAV001</li>
8      <li>NAV002</li>
9      <li>NAV003</li>
10    </ul>
11  </nav>
12  <div id="container" class="noFix">
13    <p>コンテンツ</p>
14  </div>
15</div>

css
1html,
2body,
3p { margin: 0; padding: 0;}
4#wrapper > header:first-child {
5	background-color: #00CC00;
6	height: 100px;
7}
8#wrapper > nav {
9	background-color: #FFF;
10	box-sizing: border-box;
11	border: #CCC 1px solid;
12	border-left: none;
13	border-right: none;
14	height: 50px;
15	left: 0;
16	padding: 9px 20px 0;
17	position: fixed;
18	top: 0;
19	width: 100%;
20}
21#wrapper > nav li { display: inline-block; }
22#wrapper > nav li:not(:last-child) { margin-right: 15px; }
23#wrapper > nav.noFix { position: static;}
24
25#container {
26	background-color: #CC0000;
27	height: 2000px;
28	margin: 50px 0 0;
29}
30#container.noFix { margin-top: 0; }

javascript
1// jQueryを使用しているので、このスクリプトの前で読み込んでください。
2
3$(function(){
4
5// 各要素を変数に格納
6var $nav = $('#wrapper > nav'),
7  $container = $('#container');
8// ナビゲーションの初期位置を取得
9var $navPos = $nav.offset().top;
10// スクロール時のタイマー（過処理を防ぐためのタイマー）
11var $scrollTimer = null;
12
13
14// スクロールに応じてクラスを追加したりする関数
15function $scFunc(scNow) {
16  if (scNow >= $navPos) {
17    // スクロール量が、ナビゲーションの位置を超えている
18    $nav.removeClass('noFix');
19    $container.removeClass('noFix');
20  } else {
21    // スクロールが、ナビゲーション初期位置より少ない
22    $nav.addClass('noFix');
23    $container.addClass('noFix');
24  }
25}
26
27// スクロールするたびに処理
28$(window).bind('scroll', function(){
29  var scNow = $(window).scrollTop();
30  // タイマーが入ってたら、一回リセット
31  if ($scrollTimer) {
32    clearTimeout($scrollTimer);
33  }
34
35  $scrollTimer = setTimeout(function(){
36    $scFunc(scNow);
37  }, 10);
38});
39
40// 初期スクロール量のため、一度実行
41$scFunc($(window).scrollTop());
42
43
44});