iSARA模写 第7回です。
前回はこちら↓
今回はまだできていなかったヘッダーの固定です。
一番上のヘッダー部分はスクロールしても
いつもディスプレイの一番上に固定されます。↓
これはCSSで実装します。
第1回目でヘッダー固定まで期待していた方すいませんでした・・
第1回目でヘッダーの固定までしなかったのは、
ヘッダー作成後すぐやるよりも
後でやる方が余計な手間がかからないと思ったからです。
（私が初めて挑戦した時は、ヘッダー作成の後すぐに実装したので、
余計な手間がかかりました・・）
なぜかというと、
ヘッダーだけを作って、上部に固定してもスクロールできないからです。
スクロールするにはヘッダー部分以外の要素がないと、
スクロールできる高さがないためです。
せめて、
iSARA模写 解説②〜SNSボタンの設置など〜位まで作成してからヘッダー固定をしましょう。
それが、待てない人は、
div②に適当な背景色を付け、
テキストを入れて実装をしてみてもいいと思います。
この記事の最後
「ヘッダー固定がうまくいかない時」
で説明しています。
(私はこの作業がちょっと無駄かなと思ったので、
先に他の要素も作ってから実装する方法で説明しています。)
さて、
今回のやりたいことは、
div①を常にディスプレイの一番上に常に固定することです。
ヘッダーバー固定のためのCSS
ヘッダーから下のトップ画像辺りまで作った方は、
下記のコードをCSSに書くだけです。
div①{
height: 75px; /*すでに書いてあるはず*/
width: 100%; /*すでに書いてあるはず*/
background-color: #fff; /*すでに書いてあるはず*/
position: fixed; /*固定*/
top: 0; /*上から0pxに固定*/
z-index: 99; /*スクロールした時に他の要素の後ろに隠れるのを防ぐため*/
}
div②{
padding-top: 75px; /*div②がdiv①の要素の後ろに隠れるのを防ぐため*/
}ヘッダー固定がうまくいかない時
Q.ヘッダーの下の画像や文字が隠れる
A.div②に{padding-top: 75px;}を付けましたか？
Q.スクロールできない
A.スクロールできる要素の高さをとってますか？
ヘッダーだけ作ってスクロールしようとしてもスクロールする高さがないので、
動かせません。
→div②部分を仮置きして動くか試しましょう。
仮置きCSS↓
div②{
height: 3300px;
background-color: #EBB94E;
padding-top: 75px;
}どうでしたでしょうか？
誰かのお役に立てれば幸いです！
