ナビゲーションをスクロール時に固定する時、SafariやChromeで挙動がおかしい？

とある案件で、ある程度スクロールしたらサイドナビゲーションを固定したい、という要望があり、これに対応した際に起きた問題と、その対応策の備忘録になります。

最近は広く使われている固定ナビゲーションですが、初めから固定させるタイプではなく、スクロール位置を参照して固定させるタイプのメニューは、ブラウザによっては挙動がおかしくなる事があります。
これを回避するには、jQueryを記述する際にちょっとした工夫が必要になりますので、ご紹介したいと思います。

起きた問題

固定ナビゲーション自体はよくある話なので、CSS で position: fixed と JavaScript の組み合わせで、jQuery をちょろっと書けば済むと高を括っていたところ、Safari でうまく固定されないという問題が起きました。
CSS と JavaScript の記述を見直しても、特に問題はなさそうで、一体どうしたものかと調べてみたところ、Kinchan's Blog さんのサイトで納得できる答えが見つかりました。

解決策

Kinchan's Blog さんによると、どうやら offset() の値を正しく取得できない事が原因のようで、これを回避するために、onload を使用する、というものでした。

以下が調整前、調整後の JavaScript になります。

調整前のJavaScript

$(function() {
    var navi = $('.navigation');
    var menuTop = navi.offset().top;
    $(window).scroll(function () {
      var winTop = $(this).scrollTop();
      if (winTop >= menuTop) {
        navi.addClass('fixed')
      } else if (winTop <= menuTop) {
        navi.removeClass('fixed')
      }
    });
});

調整後のJavascript

$(window).on('load',function(){
    $(function() {
        var navi = $('.navigation');
        var menuTop = navi.offset().top;
        $(window).scroll(function () {
          var winTop = $(this).scrollTop();
          if (winTop >= menuTop) {
            navi.addClass('fixed')
          } else if (winTop <= menuTop) {
            navi.removeClass('fixed')
          }
        });
    });
});

最初に onload をつけただけですが、これで無事解決できました。