ヘッダー固定の時にページ内リンクでヘッダーに食い込まない指定方法(Javascript編)

harada 763views 更新:2014年4月15日

ヘッダー固定の時にページ内リンクでヘッダーに食い込まない指定方法 こちらの記事ではCSSでの回避方法がかかれていました。
以下のように指定することでも回避できるようです。
ですがちょっとリンク後にページを更新した場合の挙動が不安定ですね。。

$(window).load(function () {
  if ($(".navbar.navbar-fixed-top").length > 0) {
    // var navHeight = $(".navbar").height(),
    var navHeight = 100,
      shiftWindow = function() { scrollBy(0, -navHeight - 10); };
    if (location.hash) {
      setTimeout(shiftWindow, 1);
    }
    window.addEventListener("hashchange", shiftWindow);
  }
});

参考: Navbar hides initial content when jumping to in-page anchor #1768

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません