title: Persistent Header Issue (JQuery & CSS3)
body: <p>I have a little question, I made a persistent header with a CSS3 animation which fully works. But after I scrolled down, the content just disappears. I hope you guys get me, because I don't know another way to explain this.</p>
  
  <p>This is my HTML code:</p>
  
  <pre><code>&lt;section id="container" class="container"&gt;
      &lt;header&gt;
          &lt;section class="inner"&gt;
              &lt;section class="row"&gt;
                  &lt;section class="five columns"&gt;&lt;!--LOGO SPOT--&gt;
                          LOGO
                  &lt;/section&gt;&lt;!--//LOGO SPOT--&gt;
                  &lt;section class="seven columns"&gt;&lt;!--MENU SPOT--&gt;
                      &lt;nav&gt;
                          &lt;li&gt;&lt;a href='#'&gt;Homepage&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href='#'&gt;Services&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href='#'&gt;About Us&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href='#'&gt;Contact&lt;/a&gt;&lt;/li&gt;
                      &lt;/nav&gt;
                  &lt;/section&gt;&lt;!--//MENU SPOT--&gt;
              &lt;/section&gt;
          &lt;/section&gt;
      &lt;/header&gt;
      &lt;main&gt;
          &lt;section class="row content"&gt;
              &lt;section class="twelve columns jumbotron"&gt;
                  asd
              &lt;/section&gt;
              &lt;section class="inner"&gt;
                  &lt;section class="row"&gt;
                      &lt;section class="three columns"&gt;
                          Feature #1
                      &lt;/section&gt;
                      &lt;section class="three columns"&gt;
                          Feature #2
                      &lt;/section&gt;
                      &lt;section class="three columns"&gt;
                          Feature #3
                      &lt;/section&gt;
                      &lt;section class="three columns"&gt;
                          Feature #4
                      &lt;/section&gt;
                  &lt;/section&gt;
              &lt;/section&gt;
          &lt;/section&gt;
      &lt;/main&gt;
      &lt;footer&gt;
  
      &lt;/footer&gt;
  &lt;/section&gt;
      &lt;script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"&gt;&lt;/script&gt;
      &lt;script src="&lt;?php SYS_PATH; ?&gt;js/header.js" type="text/javascript"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>This is my CSS code:</p>
  
  <pre><code>header {
  height: 85px;
  background: #335C7D;
  width: 100%;
  
  -webkit-transition: all 0.4s ease;
          transition: all 0.4s ease;
  }
  
  header.sticky {
  position: fixed;
  height: 48px; 
  background: #efc47D;
  }
  </code></pre>
  
  <p>This is my JQuery code:</p>
  
  <pre><code>$(window).scroll(function() {
  if ($(this).scrollTop() &gt; 1){  
      $('header').addClass("sticky");
  } else {
      $('header').removeClass("sticky");
  }
  });
  </code></pre>
  
  <p>So what happens with the scrolling?
  Before: <a href="http://prntscr.com/76payg" rel="nofollow">http://prntscr.com/76payg</a>
  After: <a href="http://prntscr.com/76pb5j" rel="nofollow">http://prntscr.com/76pb5j</a></p>
  
  <p>As you can see to the scrolling bar, I just scrolled a litle millimetre orso.</p>
  
  <p>I hope someone can help me out, thank you.</p>