スクロールトップ固定ナビでページ内リンクのズレを解消したい

シングルページで、ナビゲーションが画面の最上部にきたら固定し、ページ内リンクにてコンテンツを上下スクロールで表示したいのですが、
ズレがどうしても解消できずに悩んでいます。

下記を参照しましたが、解決できませんでした。
https://teratail.com/questions/80305
https://www.yumemono.net/anchor-link-shifted/

解決法をご教示いただけますと幸いです。

発生している問題

1）一番上のコンテンツ（section01）へのリンクをクリックすると、headerのclass(fixed)がつかない・ついていた場合は外れてしまう。
2）section01のリンクを押した後、他のリンクをクリックすると、headerにfixedは付与されるがナビの下にコンテンツが入り込んでずれる。
3）ナビが固定される前に、section01以外のリンクをクリックすると、ナビの下に入り込んでずれてしまう。
（2・3ともに、その状態で再度section01以外のリンクをクリックすると直る）
4）section02やsection03の位置から　section01のリンクをクリックすると、ナビの上に隙間が空く。

該当のソースコード

js
1$(window).on('scroll', function() {
2 if ($(this).scrollTop() > 800) {
3 $('#header').addClass('fixed');
4 } else {
5  $('#header').removeClass('fixed');
6 }
7 });
8
9$(document).ready(function() {
10    $('a[href^="#"]:not([href$="#"])').click(function() {
11        var href = $(this).attr('href');
12        var pos = $(href).offset().top - 100;
13        var duration = 600;
14        $('body, html').animate({ scrollTop: pos }, duration, 'linear');
15        return false;
16    });
17  });
18

html
1<div id="mainVisual">
2</div>
3
4<header id="header">
5<nav class="inrHeader">
6<h2 id="logo"><a href="#wrapper"><img src="*****" alt=""></a></h2>
7<ul id="navGlobal" class="clearfix">
8<li><a href="#section01">SECTION01</a></li>
9<li><a href="#section02">SECTION02</a></li>
10<li><a href="#section03">SECTION03</a></li>
11<li><a href="#section04">SECTION04</a></li>
12</ul>
13</nav>
14</header>
15
16<div id="container">
17 <div id="section01" class="box">
18 SECTION 01
19 </div>
20 <div id="section02" class="box">
21 SECTION 02
22 </div>
23 <div id="section03" class="box">
24 SECTIO 03
25 </div>
26 <div id="section04" class="box">
27 SECTION04
28 </div>
29</div>
30

css
1#mainVisual {
2height: 800px;
3width: 100%;
4position: relative;
5background: #eee;
6}
7#header {
8width: 100%;
9background: #ffc000;
10}
11.fixed {
12position: fixed;
13top: 0;
14left: 0;
15z-index: 10000;
16}
17.inrHeader {
18height: 100px;
19width: 1080px;
20margin: 0 auto;
21overflow: hidden;
22}
23#logo {
24float: left;
25padding-top: 16px;
26}
27#navGlobal {
28float: right;
29margin: 0;
30}
31#navGlobal li {
32float: left;
33}
34
35#navGlobal li a {
36display: block;
37height: 100px;
38padding: 0 20px;
39line-height: 100px;
40color: #fff;
41}
42.box {
43height: 600px;
44}
45

試したこと

fixedがつくタイミングの問題かと思い、jsの書き方をいろいろ試してみたのですが、解決できませんでした。

また、CSSでズレを解消しようと、下記のようにCSSを書いてみましたが解決できず。

css
1.box {
2margin-top: -100px;
3paddint-top: 100px;
4}

的を射ない、わかりくい表現になってしまってすみません。
とにかく、どんな状況下でリンクをクリックしてもコンテンツがずれてしまうのを回避したいです。

いろいろと頑張ってみたのですが、お手上げです・・・。
解決法をご教示いただけますと幸いです。

行動規範の内容に同意します

回答1件

ベストアンサー

おもしろそうなのでやってみました。

ヘッダーの変化がそれより下の要素に影響を与えるため(要素の位置が変わる)、挙動がややこしくなっています。
そこで、それをなくすダミーの要素を入れてみました。

javascript
1<style>
2  /* 割愛 */
3
4  /* ダミーに余計な高さや幅を与えないため、各サイズを0にセットします */
5  #dummy {
6    margin: 0;
7    padding: 0;
8    border: 0;
9    width: 0;
10  }
11</style>
12
13<body>
14  <div id="mainVisual">
15  </div>
16
17  <!-- ダミー: headerより下の要素に影響を与えないためのダミーです -->
18  <div id="dummy"></div>
19
20  <header id="header">
21    <!-- 割愛 -->
22  </header>
23
24  <div id="container">
25    <!-- 割愛 -->
26  </div>
27</body>
28
29<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
30  crossorigin="anonymous"></script>
31<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
32<script>
33  var main = $("#mainVisual");
34  var mainButtom = main.offset().top + main.height();
35  var headerHeight = $("#header").height();
36
37  $(window).on('scroll', function () {
38    if ($(this).scrollTop() >= mainButtom) {
39      $('#header').addClass('fixed');
40      $('#dummy').height(headerHeight); // ダミーを出現させます
41    } else {
42      $('#header').removeClass('fixed'); // ダミーを消します
43      $('#dummy').height(0);
44    }
45  });
46
47  $(document).ready(function () {
48    $('a[href^="#"]:not([href$="#"])').click(function () {
49      var href = $(this).attr('href');
50      var pos = $(href).offset().top - headerHeight; // ヘッダの高さ分引きます
51      var duration = 600;
52      $('body, html').animate({ scrollTop: pos }, duration, 'linear');
53      return false;
54    });
55  });
56</script>