リンク先に移動した時、ヘッダー部分だけずらす

html&css
タイトルが隠れています

これから書くことは、「しょーご中級」ではそこまで求められていません。
しかし、実際には必要なことだと思うので紹介します。

ヘッダーで隠れてしまう


クリックしてリング先に移動すると、
そのままではヘッダー部分が重なってしまい、
タイトルが隠れて
しまいます。
(下の動画参照)

少し分かりにくいかもしれませんが、
本当は「高速コーディング」の上に、
「ユアコーディングの特徴」というセクションのタイトルがあります。

そこで、移動した時にヘッダーの高さだけずらし、セクションのタイトルがきちんと表示される方法を紹介します。
(下の動画参照)

  • 1つ目は、htmlとcssの変更
  • 2つ目は、jQueryの追記

に、なります。

1の「htmlとcssだけを変更」してもうまくいかない場合があるので、
2の「jQueryを書き加える」場合も紹介しています。

html,cssの変更

書き換える前のhtmlです。

class=”feature”

sectionに、classのfeatureが当たっています。
(リンク先に飛ぶようにidも当てています。本来ならidだけでいいと思います。)

そこに下記のように、classに書き加えます。

class=”feature anchor”

classにanchorを加えました。

次に、cssにもanchorを半角スペースを空けずに書き加えます。

cssに追記

私の場合は、ヘッダーの高さが94pxです。

すると、先に載せた動画のように、ヘッダーの高さ94px分ずれて移動します。
(下の動画)

jQueryの追記

htmlとcssでは、うまくいかない場合があります。
もう先につけていたpaddingやmarginが邪魔をしてしまい、余計な高さができてしまいます。
(下図)

余計な高さ

これでも、セクションのタイトルは隠れないのですが、
タイトルの上が妙に広くなっているのが分かると思います。

そこで、jQueryを書き加えます。

jQueryの追記

正直、細かな意味は分かっていません。。。汗
でも、そのままjQueryに書き加えるだけで、きちんと表示されました。
(下の動画参照)

ヘッダーで隠さずに表示

まとめ

リンク先に移動した時に、ヘッダーで隠れない方法を紹介しました。

htmlとcssだけでうまくいくならいいですが、上に高さがついた場合は、jQueryで対応したらいいかと思います。

<参考サイト>
https://www.tam-tam.co.jp/tipsnote/html_css/post4776.html
https://y-com.info/contents/?p=5641

コメント

タイトルとURLをコピーしました