title: A sticky Top Bar makes the page jump up when scrolling past it with Zurb Foundation
body: <p>I am using the Zurb Foundation 4 framework for my site. I want to have a navbar that is positioned beneath a header that sticks to the top of the page when you scroll past.  This works fine, except that the page content jumps up ~45 pixels when the Top Bar sticks to the top of the page.  The effect can be seen on this page, though this is a different navigation element: <a href="http://foundation.zurb.com/docs/components/magellan.html" rel="noreferrer">http://foundation.zurb.com/docs/components/magellan.html</a></p>
  
  <p>Is there some way to fix this, or do I have to change my site design to accomodate this bug?</p>
  
  <p>The documentation is here: <a href="http://foundation.zurb.com/docs/components/top-bar.html" rel="noreferrer">http://foundation.zurb.com/docs/components/top-bar.html</a></p>
  
  <pre><code>&lt;div class="contain-to-grid sticky"&gt;
   &lt;nav class="top-bar"&gt;
        &lt;ul class="title-area"&gt;
          &lt;!-- Title Area --&gt;
          &lt;li class="name"&gt;
            &lt;h1&gt;&lt;a href="/"&gt;Top Bar&lt;/a&gt;&lt;/h1&gt;
          &lt;/li&gt;
          &lt;!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --&gt;
          &lt;li class="toggle-topbar menu-icon"&gt;&lt;a href="#"&gt;&lt;span&gt;Menu&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
  
        &lt;section class="top-bar-section"&gt;
          &lt;ul class="left"&gt;
            &lt;li class="divider"&gt;&lt;/li&gt;
            &lt;li class="has-dropdown"&gt;&lt;a href="/grid.php"&gt;Item 1&lt;/a&gt;
  
              &lt;ul class="dropdown"&gt;
                &lt;li&gt;&lt;label&gt;Level One&lt;/label&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Sub-item 1&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Sub-item 2&lt;/a&gt;&lt;/li&gt;
                &lt;li class="divider"&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Sub-item 3&lt;/a&gt;&lt;/li&gt;
                &lt;li class="has-dropdown"&gt;&lt;a href="#"&gt;Sub-item 4&lt;/a&gt;
  
                  &lt;ul class="dropdown"&gt;
                    &lt;li&gt;&lt;label&gt;Level Two&lt;/label&gt;&lt;/li&gt;
                    &lt;li class="has-dropdown"&gt;&lt;a href="#"&gt;Sub-item 1&lt;/a&gt;
  
                      &lt;ul class="dropdown"&gt;
                        &lt;li&gt;&lt;label&gt;Level Three&lt;/label&gt;&lt;/li&gt;
                        &lt;li class="has-dropdown"&gt;&lt;a href="#"&gt;Sub-item 1&lt;/a&gt;
  
                          &lt;ul class="dropdown"&gt;
                            &lt;li&gt;&lt;label&gt;Level Four&lt;/label&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Sub-item 1&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                        &lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Sub-item 2&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Sub-item 3&lt;/a&gt;&lt;/li&gt;
                        &lt;li class="divider"&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Sub-item 4&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                    &lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Sub-item 2&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Sub-item 3&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Sub-item 4&lt;/a&gt;
                  &lt;/ul&gt;
                &lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Sub-item 5&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li class="divider"&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;!-- Right Nav Section --&gt;
          &lt;ul class="right"&gt;
            &lt;li class="divider hide-for-small"&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Item 2&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/section&gt;
      &lt;/nav&gt;
  </code></pre>
  
  <p></p>