title: How do I create a sticky nav bar?
body: <p>I am trying to make my nav bar stick to the top of the page as I scroll down the page. I have included a JS fiddle: <a href="https://jsfiddle.net/1qsy0Lwu/" rel="nofollow noreferrer">https://jsfiddle.net/1qsy0Lwu/</a> I followed a w3schools example exactly, and it's not working. Please help. </p>
  
  <p>In my research I have noticed a difference between offsetTop and offset().top. i have a feeling the problem has to do with something in my css.</p>
  
  <p>I also noticed that the links in the navbar don't work when offsetTop is applied in the javascript. Although no errors show in the console. However, when I implement offset().top, an error shows in the console...but the nav bar links work</p>
  
  <p><em>HTML</em></p>
  
  <pre><code>&lt;div id="navbar"&gt;
      &lt;a class="active" href="#"&gt;Apps&lt;/a&gt; 
      &lt;a href="#"&gt;TAB 1 &lt;/a&gt; 
      &lt;a href="#"&gt;TAB 2&lt;/a&gt;
      &lt;a href="#"&gt;TAB 3&lt;/a&gt;
      &lt;a href="#"&gt;TAB 4&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div class="container"&gt;
  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT 
  &lt;/div&gt;
  </code></pre>
  
  <p><em>CSS</em></p>
  
  <pre><code>#navbar {
  overflow: hidden;
  background-color: #161717;
  margin-top: 0.1%;
  text-align: center;
  }
  
  #navbar a {
  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
   }
  
  #navbar a:hover {
  background-color: #ddd;
  color: black;
   }
  
  #navbar a.active {
  background-color: #1e272d;
  color: white;
   }
  
  .container {
  padding: 16px;
  }
  
  .sticky {
  position: fixed;
  top: 0;
  width: 100%;
  }
  
  .sticky + .container {
  padding-top: 1000px;
  }
  </code></pre>
  
  <p><em>JS</em></p>
  
  <pre><code>$(document).ready(function () {
  
  window.onscroll = function () { myFunction() };
  
  var navbar = document.getElementById("navbar");
  var sticky = navbar.offsetTop;
  
  function myFunction() {
   if (window.pageYOffset &gt;= sticky) {
      navbar.classList.add("sticky")
   } else {
      navbar.classList.remove("sticky");
   }
  }
  
  });
  </code></pre>