为什么粘性导航栏适用于Codepen和“常规浏览器”？

Question

我有一个粘性导航栏，就像Codepen机器上的魅力一样，但是当我给它完整的代码（把它放到Brackets）并尝试用我的浏览器运行它不再粘，为什么？ 我当然添加了JQuery脚本标记，所以我想问题不在这里。还将其包装到$（document）.ready（function（）{}）中 我现在正在Ubuntu上使用Firefox 55，也在Chromium 60上进行了测试。 链接到Codepen：https://codepen.io/zeeebra/pen/mMZYJr  代码：

$(document).ready(function() {
  $(window).on('scroll', function() {
    /*var navHeight = $(window ).height() - 67;*/
    var heHeight = $('.header').height();
    if ($(window).scrollTop() > heHeight) {
      $('nav').addClass('sticky');
    } else {
      $('nav').removeClass('sticky');
    }
  });
});

nav {
  margin-top: 0px;
  width: 100%;
  height: 60px;
  display: inline-block;
  position: relative;
  z-index: 3;
  top: -67px;
  background-color: lightgreen;
}

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

section {
  background-color: grey;
  width: 100%;
  height: 120px;
  padding-top: 10px;
}

#lorem {
  width: 640px;
  height: 500vh;
  font-size: 14px;
  padding-top: 50px;
  margin: 0 auto 0;
}

nav h2 {
  font-weight: 700;
  display: inline-block;
  padding-right: 15px;
}

nav p {
  font-weight: 500;
  display: inline-block;
}

section ul li {
  list-style: none;
  display: inline-block;
  font-size: 12px;
  margin-right: 9px;
}

section ul li a {
  color: black;
  text-decoration: none;
}

section li a:hover {
  text-decoration: none;
  color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="header">
  <ul>
    <li><a href="#">HOME</a></li>
    <li><a href="#">ABOUT</a></li>
    <li><a href="#">SERVICES</a></li>
    <li><a href="#">TEAM</a></li>
    <li><a href="#">CONTACT</a></li>
  </ul>
</section>


<nav>
  <h2>TRAVEL MOOD</h2>
  <p>what is yours ?</p>
</nav>

<div id="lorem">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non ex sit amet justo condimentum sagittis. Nullam blandit malesuada urna sed varius. Phasellus convallis congue mauris, vitae hendrerit ante vulputate sit amet. Vestibulum ante ipsum primis
  in faucibus orci luctus et ultrices posuere cubilia Curae; Sed sit amet lobortis tortor. Phasellus pellentesque est ut imperdiet scelerisque. Suspendisse eget felis in mauris maximus semper sit amet in sem. Ut vulputate neque enim, vitae egestas tortor
  scelerisque ut. Duis aliquam sit amet quam eu dictum. Curabitur imperdiet urna mollis pharetra vehicula. Sed efficitur feugiat nulla. Cras purus justo, bibendum vestibulum bibendum vitae, pellentesque et mauris. Nam varius elit ut lacus lacinia, ac
  tempor leo ornare. Suspendisse potenti. Donec eget ornare tellus, et condimentum nulla. Aenean sit amet risus id arcu imperdiet commodo sed cursus sem. Nunc bibendum nunc ac pellentesque viverra. Pellentesque mauris leo, pellentesque non sodales ac,
  lobortis ut nisi. Cras dictum posuere tellus, a tempus metus volutpat et. Donec eleifend pretium turpis, vitae vulputate ante gravida nec. Vestibulum sit amet lacus sed odio ornare maximus in non turpis. Sed tortor urna, varius ac posuere posuere, posuere
  id urna. Proin pellentesque lectus a est semper lacinia. Vestibulum vestibulum tempus lorem, id pretium elit laoreet eu. Aenean iaculis elit sed ultricies tristique. Nullam lacinia purus vitae arcu tempus suscipit. Vestibulum ante ipsum primis in faucibus
  orci luctus et ultrices posuere cubilia Curae; Sed fermentum magna eget est sollicitudin interdum. Aliquam id mollis ligula. Donec lectus nisl, gravida eget augue a, semper consequat leo. Nulla facilisis faucibus commodo. Donec suscipit molestie cursus.
  Suspendisse massa tellus, pharetra at mollis ut, consectetur quis felis. Donec augue ipsum, eleifend vitae lectus quis, feugiat varius diam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut diam orci, vulputate
  ut ipsum pretium, malesuada iaculis tellus. Pellentesque urna nulla, tempus sit amet accumsan eget, rutrum ut nisl. Morbi tristique posuere eros, at semper justo ultricies sit amet. Duis rhoncus lacus eget justo commodo, a ullamcorper ipsum ornare.
  Nullam molestie mauris a vestibulum sagittis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam non est ultricies, dictum est non, lobortis arcu. Proin hendrerit commodo nisi ac aliquam. Praesent finibus at lectus quis mattis. Curabitur
  mattis placerat ornare. In id mattis arcu. Fusce blandit leo in tortor feugiat facilisis. Integer luctus a metus quis faucibus. Phasellus vitae pellentesque tortor. Fusce ligula ex, iaculis eget dolor sed, viverra convallis neque. Aenean nisl leo, rhoncus
  et purus id, ullamcorper ullamcorper nulla. Fusce accumsan magna quis mollis accumsan. Nunc massa enim, cursus in lacinia in, dapibus aliquet eros. Praesent hendrerit egestas sapien eu ullamcorper. Etiam tristique eros vel ipsum blandit pellentesque.
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus augue diam, lobortis vel ipsum at, accumsan bibendum purus. Quisque risus sem, scelerisque at mi eu, cursus maximus mi. In congue ante non imperdiet tristique.
</div>