title: fullPage.js scroll to fixed header
body: <p>I have a page with a horizontal navigation on top and above that is a header img. I'm using fullPage.js as my layout and by default navbar is always on top. I want my header img to appear only on the first section and be hidden everywhere else. I was thinking about a solution in jQuery which would be if I'm on every section but first header margin-top would be <code>[header_img_height]</code> and when I get to section one it would return to <code>margin-top:0px</code>. </p>
  
  <p>My header markup right now:</p>
  
  <pre><code>&lt;header&gt;
    &lt;div id="header_banner"&gt;
    &lt;/div&gt;
    &lt;ul id="nav_cont"&gt;
       &lt;li data-menuanchor="section1"&gt;
          &lt;a id="home_hover" href="#section1"&gt;Home&lt;/a&gt;
       &lt;/li&gt;
       &lt;li data-menuanchor="section2"&gt;
          &lt;a id="about_hover" href="#section2/1"&gt;About&lt;/a&gt;
       &lt;/li&gt;
       &lt;li data-menuanchor="section3"&gt;
          &lt;a id="gallery_hover" href="#section3"&gt;Gallery&lt;/a&gt;
       &lt;/li&gt;
       &lt;li data-menuanchor="section4"&gt;
          &lt;a id="literature_hover" href="#section4"&gt;Literature&lt;/a&gt;
       &lt;/li&gt;
       &lt;li data-menuanchor="section5"&gt;
          &lt;a id="contact_hover" href="#section5"&gt;Contact&lt;/a&gt;
       &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/header&gt;
  &lt;div id="fullpage"&gt;
    &lt;div class="section" id="Home"&gt;
       &lt;div class="container"&gt;&lt;/div&gt;
    &lt;/div&gt;
    .
    .
    .
  other sections
  </code></pre>
  
  <p>This is what I want to end up with:</p>
  
  <p><a href="https://i.stack.imgur.com/7oEy5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7oEy5.png" alt="enter image description here"></a></p>