ヘッダーが fixed, stickyの場合、内部リンクで移動させると位置がずれる問題の対処方法

サイトのヘッダーが fixed, stickyの場合、ページ内部リンクを使ってページ内の特定の場所に移動させようとするとfixedで固定されているヘッダーのheightを考慮しないので、望んでいる位置に移動されない問題が発生します。

See the Pen
inner link by Bong yiroon (@boltmanber)
on CodePen.

こういった場合、CSSで解決する方法と、jQueryで解決する方法、2つがあります。

CSSで解決

ターゲットDOMを margin-top: -○○px を使ってヘッダー分上げて, 再び padding-top:○○px で元の位置に戻す方法です。(ターゲットの頭を伸ばす効果)

See the Pen
inner link with css by Bong yiroon (@boltmanber)
on CodePen.

CSSのここが大事ですね！

.height_fix {
    margin-top: -70px;
    padding-top: 70px;
}

ターゲットとなるDOMに高さ調整用のクラスを一つ一つ付けないといけないし、ヘッダーの高さが変わるとCSSも変えないといけないので少し面倒。。。

jQueryで解決

</body> タグの前に次のスクリプトを挿入すると、一発で解決できます。
ヘッダーのサイズも自動算出してくれるし、アニメーション効果で、すーーーっと移動するので、個人的にはこの方法をおすすめします。

See the Pen
inner link with jQuery by Bong yiroon (@boltmanber)
on CodePen.

軽く説明すると

// ヘッダーの高さ算出。 paddingなどの全体の高さが必要なのでouterHeight()を使うのがポイント！
var headerHeight = $("header").outerHeight();
// リンク先
var href = $(this).attr("href");
// リンク先の DOM 要素を割り出す
var target = $(href == "#" || href == "" ? "body" : href);
// リンク先 DOMの height値算出
var position = target.offset().top - headerHeight;
// アニメーション効果を入れてリンク先に移動
$("html, body").animate({ scrollTop: position }, 600, "swing");

最近はcssで position:sticky を使う機会が多いので有用だと思います。
ま、いつものごとく、ie11ではsticky使えないんですけどね～
早くなくならないかな～ ie。。。

Buy me a coffee