headerを固定したら下の要素と重なる時の対処法（headerの高さが可変)
がうがうです。
headerを固定した時に下に続く要素が重なる時の対処法です。
試行錯誤して3種類試したので覚え書きです。
先日マークアップの練習としてそれっぽいページを作っていた時に
ヘッダーを固定すると、
1.ヘッダーと下に続く要素が重なる
2.ページ内リンクした時に見出しの位置がズレる
以上2点の問題が発生したので、色々調べてみました。
コードサンプル
See the Pen
qiita_css_position-sticky/sample-failure by がうがう (@gawgaw-2020)
on CodePen.
今回はヘッダーの高さがPC表示とスマホ表示で可変になっています。
結論 色々試した結果「position: sticky」が便利だった
様々なアプローチがあると思いますが、marginで高さをとったり、JavaScriptで挑戦してみましたが、
最終的に「position: sticky」が一番シンプルに記述できたので記事にしてみました。
デモはこちら
position: stickyで解決
https://gawgaw-2020.github.io/qiita_css_position-sticky/sample-sticky/
CSSのみ。marginで解決
https://gawgaw-2020.github.io/qiita_css_position-sticky/sample-margin/index.html
JavaScriptで解決
https://gawgaw-2020.github.io/qiita_css_position-sticky/sample-js/index.html
GitHubはこちら
https://github.com/gawgaw-2020/qiita_css_position-sticky
CSSのみ。position: stickyで解決
ヘッダータグのposition: fixedをposition: stickyに変更
header{width:100%;background-color:rgba(0,0,0,.7);height:90px;/* ヘッダーを固定 *//* position: sticky;に変更 */position:sticky;top:0;z-index:9999;}position: stickyは
高さが保たれる
指定した位置にくっつく
といった特徴があるため、ヘッダーの高さが可変でも下に続く要素が隙間なく続いてくれました。
See the Pen qiita_css_position-sticky/sample-sticky by がうがう (@gawgaw-2020) on CodePen.
CSSのみ。marginで解決
参考にしたサイトでもこの方法で解決が多かったです。
1.後に続く要素のmargin-topをヘッダーの高さ分とる
.top-image{height:800px;background-image:url(../img/top-image.jpeg);background-size:cover;background-position:center;/* ヘッダーの高さ分余白をとる */margin-top:90px;}2.スマホ時にヘッダーの高さが変わるので、その分margin-topも修正
@mediascreenand(max-width:768px){.top-image{margin-top:40px;}}この方法の場合、ページによってヘッダーの高さが違う場合などに記述が増えたり、管理が大変だなと感じました。
See the Pen qiita_css_position-sticky/sample-margin by がうがう (@gawgaw-2020) on CodePen.
JavaScriptで解決（未解決?）
最近JavaScriptの勉強を始めたので、実は最初にこちらを試しました。
ヘッダーの高さが可変なので「読み込み時にヘッダーの高さを取得して、その分コンテンツを下げよう」というのが魂胆です。
// ヘッダーの高さを取得constheight=document.getElementById('header').clientHeight;// 高さ文のマージンを適用する要素を取得consttopImage=document.getElementById('top-image');// ページ読み込み時にスタイルを追加window.addEventListener('load',()=>{topImage.style.marginTop=height+'px';});今回はヘッダーの高さが可変のため、
最初に読み込んだ時と、画面幅が変わった場合に明らかにおかしい隙間が発生してしまいます。
See the Pen VwaRzby by がうがう (@gawgaw-2020) on CodePen.
resizeイベントと時間差での処理を使って実装でもいいかもしれないと書いていて思いました。
ページ内リンクした時に見出しの位置を合わせる
こちらに関しては、今回はリンク先に「anchor」クラスを追加して対応しました。
<sectionid="philosophy"class="philosophy anchor"><h2>企業理念</h2></section><sectionid="service"class="service anchor"><h2>事業紹介</h2></section><sectionid="contact"class="contact anchor"><h2>お問い合わせ</h2></section>/* 数値は調整可能 */.anchor{padding-top:120px;margin-top:-120px;}クラスつける前
クラス追加後
調整できました。
全てのリンク先にクラスをつけないといけないので、少し面倒臭いなぁと感じてしまうので
JavaScriptなどで調整する方法も調べてみたいと思います。
最後に
「header 固定? fixed & top して padding-top か margin-top して z-index でしょ」から
「他に方法ないかなぁ」と考えることができたので良かったと感じました!!