offsetを使ったヘッダー固定のjsで、画面サイズを変えると固定する位置がずれる問題を解決したい

Question

前提・実現したいこと

スクロールしてグローバルメニューが画面の上部に達した時に固定するという動きを実装したいです。
参考ページ↓
https://takaya-com.jp/archives/2020/04/【jquery】スクロールしたら途中からヘッダーを固定/

発生している問題・エラーメッセージ

ブラウザの画面幅を少し縮めてナビを固定させている状態からブラウザをフルスクリーンにするとナビが上部に固定されたままずれる（本来固定される位置よりも前に固定されてしまう）現象が発生してしまいました。

当該状況が確認される環境は以下の2つです。
・Mac macOS Catalina 10.15.7 Safari 14
・Mac macOS Big Sur 11.3.1 Safari 14.1

該当のソースコード

if (window.matchMedia('(min-width: 961px)').matches) {//PCのみ適用
  $(function () {
    var nav_pos = $("#header__pc").offset().top;
    var nav_height = $("#header__pc").outerHeight();
    $(window).scroll(function () {
      if ($(this).scrollTop() > nav_pos) {
        $("body").css("padding-top", nav_height);
        $("#header__pc").addClass("header__fixed");
      } else {
        $("body").css("padding-top", 0);
        $("#header__pc").removeClass("header__fixed");
      }
    });
  });
}

おそらく画面幅を変更した際にヘッダーよりも前の要素の高さが変わり、offsetの数値がずれることによって発生しているのかなと思うのですが、解決方法がわかる方いましたらよろしくお願い致します。

Answer 1

position:stickyを使用して解決しました。

Answer 2

varで定義している変数をscrollの関数の中に入れてあげれば、
スクロール時に基準にしている要素のサイズを再取得および再定義するから直るはず。
ただし、多少重くなるかなと。

画面サイズが変更されたときに実行される関数があるようなので、
これも組み込んでみると良いかもです。

参考URL　MDN　window.onresize
https://developer.mozilla.org/ja/docs/Web/API/GlobalEventHandlers/onresize

Comments

[saku615]

結局今回はposition:sticky;を使うことになりました。
ありがとうございました。