Geek asks and answers

A sticky top bar makes the page jump, scrolling it with the Zurb Foundation

I am using the Zurb Foundation 4 framework for my site. I want to have a navigation bar located under the heading that scrolls at the top of the page. This works great, except that the page content accumulates up to 45 pixels when the top drum sticks to the top of the page. The effect can be seen on this page, although this is a different navigation element: http://foundation.zurb.com/docs/components/magellan.html

Is there a way to fix this, or do I need to change the site design to post this error?

The documentation is here: http://foundation.zurb.com/docs/components/top-bar.html

<div class="contain-to-grid sticky">
 <nav class="top-bar">
      <ul class="title-area">
        <!-- Title Area -->
        <li class="name">
          <h1><a href="/">Top Bar</a></h1>
        </li>
        <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
        <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
      </ul>

      <section class="top-bar-section">
        <ul class="left">
          <li class="divider"></li>
          <li class="has-dropdown"><a href="/grid.php">Item 1</a>

            <ul class="dropdown">
              <li><label>Level One</label></li>
              <li><a href="#">Sub-item 1</a></li>
              <li><a href="#">Sub-item 2</a></li>
              <li class="divider"></li>
              <li><a href="#">Sub-item 3</a></li>
              <li class="has-dropdown"><a href="#">Sub-item 4</a>

                <ul class="dropdown">
                  <li><label>Level Two</label></li>
                  <li class="has-dropdown"><a href="#">Sub-item 1</a>

                    <ul class="dropdown">
                      <li><label>Level Three</label></li>
                      <li class="has-dropdown"><a href="#">Sub-item 1</a>

                        <ul class="dropdown">
                          <li><label>Level Four</label></li>
                          <li><a href="#">Sub-item 1</a></li>
                        </ul>
                      </li>
                      <li><a href="#">Sub-item 2</a></li>
                      <li><a href="#">Sub-item 3</a></li>
                      <li class="divider"></li>
                      <li><a href="#">Sub-item 4</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Sub-item 2</a></li>
                  <li><a href="#">Sub-item 3</a></li>
                  <li><a href="#">Sub-item 4</a>
                </ul>
              </li>
              <li><a href="#">Sub-item 5</a></li>
            </ul>
          </li>
          <li class="divider"></li>
        </ul>
        <!-- Right Nav Section -->
        <ul class="right">
          <li class="divider hide-for-small"></li>
          <li><a href="#">Item 2</a></li>
        </ul>
      </section>
    </nav>

+5
4

, -, "" Javascript Foundation 4. , , #, . ( , ).

- , Foundation. , , .sticky <nav> <ul> .

... "" Javascript, . , fixed, . , , , (, ).

... Top Top Foundation. , . .hide-for-small, .show-for-small, , ""... ( .show-for-small).

: Top Bar ( ) . : -)

+10

: https://github.com/zurb/foundation/issues/1993

:

, , :

<nav class="top-bar" data-options="scrolltop: false">

:

$(document).foundation('topbar', {scrolltop: false});
+6

: https://github.com/jordanmerrick/foundation/commit/47391710c7b6d30ad54e50f3b2526cb8f6184be1

foundation.topbar.js, body , :

if ($('.sticky').length > 0) {
   var distance = $('.sticky').length ? $('.sticky').offset().top: 0,
       $window = $(window);
      var offst = $('nav.top-bar').outerHeight()+20;
     (".sticky").after("<div class='top-bar-sticky-padding'></div>");
     $window.scroll(function() {
       if ( $window.scrollTop() >= ( distance ) ) {
          $(".sticky").addClass("fixed");

- $('body'). css ('padding-top', offst);          }

      else if ( $window.scrollTop() < distance ) {
         $(".sticky").removeClass("fixed");

- $('body'). css ('padding-top', '0');         }      });    }

I'm not a javascript master, but it seems that instead of setting offst to the height of .top-bar, you set it directly to .top-bar-sticky-padding, you can control the offset with the media request instead of forcibly shifting the top size panels.

Am I really wrong? I'm nervous about “cracking the kernel”, but this seems to have solved the problem for me.

+1
source

Remove the sticky class if you do not need it. Worked for me.

+1
source

More articles:


All Articles