jQueryでの可変の表示位置の取得

表示位置が可変するページにて、
スクロールしてナビの位置に来た時にウインドウ上部に固定したいと思い下記のコードを書きました。

https://jsfiddle.net/aq8j1rLL/9/

$(function() {

  $(window).on('load resize', function() {

    var navScrollHeight = $('#gnav').offset().top;

    $(window).on('scroll', function() {
      if ($(this).scrollTop() > navScrollHeight) {
        $('#gnav').addClass('fixed');
      } else {
        $('#gnav').removeClass('fixed');
      };
    });

  });

});

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#container {
  width: 100%;
  height: 2000px;
  background-color: grey;
}

header {
  position: relative;
}

h1 {
  width: 100%;
  height: 300px;
  background-color: white;
  margin: 0;
}

#gnav {
  width: 100%;
  height: 70px;
  background-color: black;
  z-index: 1000;
}

.fixed {
  position: fixed;
  top: 0;
  left: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id='container'>
  <header>
    <h1></h1>
    <nav id="gnav"></nav>
  </header>
</div>

ナビが固定される前にウインドウの大きさを変えるとナビの位置でちゃんと固定されるのですが、
固定された後にウインドウの大きさを変えると、いきなりナビが消えたり、別の位置で固定されたり不安定になります。

当方初心者で色々試したのですがさっぱりわかりません。

何卒ご教授の方よろしくお願いいたします。