title: Navbar not sticking
body: <p>I'm relatively new to coding a website and don't have much experience on stack overflow. For some reason it seems my navbar doesn't want to stick. I've searched around but can't find any obvious issues. Thanks for the help!</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;script&gt;
  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");
    }
  }
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="navbar" id="navbar"&gt;
    &lt;a href="Contact.html"&gt;Contact&lt;/a&gt;
    &lt;a href="Passion.html"&gt;My Passions&lt;/a&gt;
    &lt;a href="About.html"&gt;About&lt;/a&gt;
    &lt;a class="active" href="index.html"&gt;Home&lt;/a&gt;  
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.navbar {
      overflow: hidden;
    background-color: #333;
  }
  
  .navbar a{
    float: right;
    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: #4CAF50;
    color: white;
  }
  
  .content {
    padding: 16px;
  }
  
  .sticky {
    position: fixed;
    top: 0;
    width: 100%;
  }
  
  .sticky + .content {
    padding-top: 60px;
  }
  </code></pre>
  
  <p>If there is anything else you need from me to help just let me know. </p>