最近の流行りかは分かりませんが、ヘッダー、もしくはナビゲーションだけが スクロールの途中から固定するサイトをつくる機会が増えてきました。 そのデザインを見た時の毎回の悩みは、「ページ内リンクの頭出しがずれるのをどうしよう...」ということでした。 今日もまた同じことで悩んだので少し調べつつ、解決策を考えてみました。 この状況が発生するシチュエーション コンテンツより前に存在する要素(ヘッダー・ナビなど)をposition: fixed;で固定している ネットに載っていた解決策 CSSで解決する方法 頭出しの対象となる要素(見出しなど)に以下のCSSを指定する padding-top: 100px; /* 固定するもののheightと同じpx値 */ margin-top: -100px; /* 固定するもののheightと同じpx値 */ JavaScriptで解決する方法 ページ表示時に
![position: fixed;でページ内リンクの頭出しがずれる件の解決策を考えてみる | Blog | riatw.me](https://cdn-ak-scissors.b.st-hatena.com/image/square/89c4925c2acec287f3ba4a8276ae1704585a04b1/height=288;version=1;width=512/https%3A%2F%2Friatw.me%2Fassets%2Fimages%2Ffb_thumb.png)