title: Sticky Navbar Working in Firefox but not Chrome
body: <p>I've been searching for an answer to this all day, I think something is going wrong with other stylings but all the code I have works perfectly in Firefox but when in Chrome some weird things happen.</p>
  
  <p>While scrolling down the page, at the point where the navbar should switch from under the header to fixed on top of the page, it will almost always jitter as the shift happens. Sometimes even flashing. Some things I've been able to replicate are :
  A jump or flash anytime the shift happens.
  A constant strobe flash if scrolled directly to the point of the change.
  A slow and constant scroll will jump the page up about 5%.</p>
  
  <p>Here's my code.</p>
  
  <p>HTML</p>
  
  <pre><code> &lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta content="en-us" http-equiv="Content-Language" /&gt;
          &lt;meta content="text/html; charset=utf-8" http-equiv="Content-Type" /&gt;
          &lt;meta name="viewport" content="width=device-width, user-scalable=no" /&gt;
  
          &lt;title&gt;NMU - SCA&lt;/title&gt;
  
          &lt;link rel="stylesheet" href="css/desktop.css"&gt;
          &lt;link rel="stylesheet" href="css/mobile.css"&gt;
          &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="header"&gt;
              &lt;h1&gt;Student Cybersecurity Association&lt;/h1&gt;
              &lt;h2&gt;of Northern Michigan University&lt;/h2&gt;
          &lt;/div&gt;
          &lt;div class="navbar"&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="index.html"&gt;Information&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="index.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;p&gt;a&lt;/p&gt;
              &lt;p&gt;a&lt;/p&gt;
              &lt;p&gt;a&lt;/p&gt;
              &lt;p&gt;a&lt;/p&gt;
              &lt;p&gt;a&lt;/p&gt;
              &lt;p&gt;a&lt;/p&gt;
              &lt;p&gt;a&lt;/p&gt;
              &lt;p&gt;a&lt;/p&gt;
              &lt;p&gt;a&lt;/p&gt;
              &lt;p&gt;a&lt;/p&gt;
              &lt;p&gt;a&lt;/p&gt;
              &lt;p&gt;a&lt;/p&gt;
              &lt;p&gt;a&lt;/p&gt;
              &lt;p&gt;a&lt;/p&gt;
              &lt;p&gt;a&lt;/p&gt;
              &lt;p&gt;a&lt;/p&gt;
              &lt;p&gt;a&lt;/p&gt;
              &lt;p&gt;a&lt;/p&gt;
              &lt;p&gt;a&lt;/p&gt;
              &lt;p&gt;a&lt;/p&gt;
              &lt;p&gt;a&lt;/p&gt;
              &lt;p&gt;a&lt;/p&gt;
              &lt;p&gt;a&lt;/p&gt;
              &lt;p&gt;a&lt;/p&gt;
              &lt;p&gt;a&lt;/p&gt;
              &lt;p&gt;a&lt;/p&gt;
              &lt;p&gt;a&lt;/p&gt;
              &lt;p&gt;a&lt;/p&gt;
              &lt;p&gt;a&lt;/p&gt;
              &lt;p&gt;a&lt;/p&gt;
              &lt;p&gt;a&lt;/p&gt;
              &lt;p&gt;a&lt;/p&gt;
              &lt;p&gt;a&lt;/p&gt;
              &lt;p&gt;a&lt;/p&gt;
              &lt;p&gt;a&lt;/p&gt;
              &lt;p&gt;a&lt;/p&gt;
              &lt;p&gt;a&lt;/p&gt;
              &lt;p&gt;a&lt;/p&gt;
              &lt;p&gt;a&lt;/p&gt;
              &lt;p&gt;a&lt;/p&gt;
              &lt;p&gt;a&lt;/p&gt;
              &lt;p&gt;a&lt;/p&gt;
              &lt;p&gt;a&lt;/p&gt;
              &lt;p&gt;a&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;script type="text/javascript" src="js/main.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>* {
      margin: 0px;
      padding: 0px;
  }
  
  html, body {
      height:100%
  }
  
  #header {
      padding: 20%;
      background-color: black;
  }
  
  #header h1, #header h2 {
      text-align: center;
      color: white;
  }
  
  .navbar {
      display: inline-block;
      position: relative;
      width: 100%;
      padding: 0px;
      margin: 0px;
      background-color: red;
      z-index: 100;
      top: 0;
      left: 0;
  }
  
  .navbar ul {
      padding: 0px;
      margin: 0px;
  }
  
  .navbar li {
      display: inline-block;
      float: left;
      padding: 15px;
      background-color: red;
  }
  
  .navbar a {
      text-decoration: none;
      color: white;
  }
  </code></pre>
  
  <p>JQuery</p>
  
  <pre><code>var main = function() {
  
    $(window).scroll(function() {
       var scrollVal = $(this).scrollTop();
        if ( scrollVal &gt;= $('#header').outerHeight(true)) {
            $('.navbar').css({'position':'fixed','top' :'0px'});
        } else {
            $('.navbar').css({'position':'static','top':'auto'});
        }
    });
  }
  
  $(document).ready(main);
  </code></pre>
  
  <p>I am really sick of this issue and just want chrome to behave.</p>