固定ヘッダー時の内部リンクのずれ問題

1 やりたいこと

やりたいこと

ナビゲーションが途中に配置されていて、スクロールするとヘッダーで固定する。
固定する時、ちょっとアニメーション加えて、上から下がって来る感じに！
ナビゲーションメニューはページ内リンク
メニューを押したらページ内リンクへ飛ぶが、ナビゲーションに隠れないように、ナビゲーションの下でストップさせたい。
レスポンシブで、ナビゲーションの高さが変わっても自動で計算してストップして欲しい！
スクロール時はやっぱりスムーススクロールで！

やりたいこと、わかりますかね？？？

ここでストップさせたい！

まずは、スクロールしてナビゲーションがトップにきたら、そのまま固定してずっと表示させておきたい。
ナビゲーションのメニューはページ内リンクなので、クリックしたら指定箇所に飛ぶ。
が、しかし！それだけだと、コンテンツはページ上部にくっつくので、ナビゲーションの下にもぐっちゃう！
じゃあ、ナビゲーションの高さ分paddingとかで余白つくれば？
でもね、レスポンシブの場合、状況により高さ変わるじゃん！
それを細かくデバイスサイズごとに設定するの？？？？

という訳です！

デモ

HTML

<div class="mv-area">
    <img src="img/mv.jpg" alt="">
</div>
<nav class="nav">
    <ul>
        <li><a href="#">TOP</a></li>
        <li><a href="#sec-01">SERVICE</a></li>
        <li><a href="#sec-02">ABOUT</a></li>
        <li><a href="#sec-03">CONTACT</a></li>
    </ul>
</nav>
<div class="main">
    <section id="sec-01">
        <h2>SERVICE</h2>
        <p><img src="img/service-img.jpg" alt=""></p>
        <p>ご提供するサービスはなんちゃらかんちゃらはなんちゃらかんちゃらはなんちゃらかんちゃらはなんちゃらかんちゃら</p>
    </section>
    
    <section id="sec-02">
        <h2>ABOUT</h2>
        <p><img src="img/about-img.jpg" alt=""></p>
        <p>どうのこうの</p>
    </section>
    
    <section id="sec-03">
        <h2>CONTACT</h2>
        <p>あれやこれや</p>
    </section>
</div><!--main-->

CSS

.nav {
      position: static;
      top: -30px;
      transition: all 0.3s ease 0s;
}
.is-fixed {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 2;
      width: 100%;
}

jQueryは入れておいてくださいね。

途中にあるナビゲーションがスクロールして上部にきたらナビゲーションを固定する。そしてリンクメニューをクリックでアンカー位置に、シュルシュルと移動。

JavaScript

ナビゲーションを途中から固定

//ナビゲーションを途中から固定
$( window ).on( 'scroll', function() {
  if ( 500 < $( this ).scrollTop() ) { // 500px以上スクロールしたら
    $( '.nav' ).addClass( 'is-fixed' );
  } else {
    $( '.nav' ).removeClass( 'is-fixed' );
  }
});

アンカーリンクのストップ位置と動き

//アンカーリンクストップ位置・調整
$(function(){
  $('a[href^="#"]').click(function(){
    var headerHight = $(".nav").outerHeight();//ナビゲーションの高さを取得
    var href = $(this).attr("href");
    var target = $(href == "#" || href == "" ? "body" : href);
    var position = target.offset().top - headerHight;
    $("html, body").animate({ scrollTop: position }, 500, "swing");//500 ←スクロールのスピード
    return false;
  });
});

無事に、ナビゲーションの下でストップすることができました！