Lepki górny pasek sprawia, że ​​strona przeskakuje podczas przewijania obok za pomocą Zurb Foundation

Question

Używam ramy Zurb Foundation 4 dla mojej witryny. Chcę mieć pasek nawigacyjny umieszczony pod nagłówkiem, który będzie przewijał się do góry strony podczas przewijania. Działa to dobrze, z wyjątkiem tego, że zawartość strony przeskakuje o ~ 45 pikseli, gdy górny pasek przylega do górnej części strony. Efekt można zobaczyć na tej stronie, ale jest to inny element nawigacji: http://foundation.zurb.com/docs/components/magellan.html

Czy jest jakiś sposób, aby to naprawić, czy muszę zmienić projekt strony, aby pomieścić ten błąd?

Dokumentacja jest tutaj: 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> 

Answer 1

To wydaje się być zakodowane "funkcja" w Fundacji 4'S JavaScript. Zamiast jedynie zapobiegać domyślnemu zachowaniu linku, automatycznie wymusza przekierowanie linku do #, co powoduje, że przeglądarka przeskakuje na górę strony. Wydaje się to być zamierzone (więcej o tym za chwilę).

Jedyną alternatywą na razie jest po prostu nie używaj komponentu Top Bar i twórz własną nawigację przy użyciu innych, bardziej niezawodnych komponentów Foundation. Na przykład można łatwo zbudować własną nawigację, używając zarówno klasy .sticky, jak i po prostu definiując świeży element <nav> ze wszystkimi niezbędnymi elementami menu.

Pasek górny ma bardzo specyficzne przeznaczenie według projektu ... kliknięcie "Menu" spowoduje użycie Javascript, aby wyświetlić nawigację jako pojedynczą kolumnę opcji pod górnym paskiem. Aby użytkownicy mobilni mogli przewijać duży zestaw opcji, przeskakuje to okno na górę strony i usuwa zachowanie, dopóki nie zamknie menu. Działa to wystarczająco dobrze, gdy Twój górny pasek zaczyna się u góry strony, ale ma poważne konsekwencje, gdy nie ma (na przykład przewijanie do góry strony może spowodować, że menu zniknie z widoku).

Teraz ta opinia jest czysto ... ale jestem naprawdę nie fanem realizacji górnym pasku Fundacji. Testy użyteczności wykazały, że umieszczanie mobilnych menu w stopce i łączenie z nimi za pomocą kotwicy są bardziej skuteczne. Przyjazne dla użytkownika są: i. Możesz użyć opcji .hide-for-small, aby ukryć elementy menu na pulpicie i .show-for-small, aby odsłonić własne niestandardowe, zakotwiczone łącze "Menu" ... ten link menu będzie zakotwiczony w menu dostosowanym do urządzeń mobilnych w stopce (co ponownie ujawnisz z .show-for-small) .

Krótka historia: Top Bar jest niechlujny z punktu widzenia użyteczności i jest uszkodzony (według projektu) w przypadku użycia. Polecam budowaniu własnego lepkie menu :-)

Answer 2

Na tej stronie: https://github.com/jordanmerrick/foundation/commit/47391710c7b6d30ad54e50f3b2526cb8f6184be1

Znalazłem kod w foundation.topbar.js który dodaje dopełnienie do znacznika body w zależności od tego, czy top-bar jest lepki lub nie:

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"); 

- $ ("ciało"). css ("dopełnienie-góry", offst); }

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

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

Nie jestem czarodziejem javascript - ale wygląda na to, że zamiast ustawiać się na najwyższym poziomie .top-bar, ustawia się go bezpośrednio na wartość .top-bar-sticky-padding, możesz kontrolować przesunięcie za pomocą zapytania o media zamiast wymuszać przesunięcie rozmiaru górnego paska.

Czy jestem w błędzie? Denerwuję się "hakowaniem rdzenia", ale wydaje mi się, że to rozwiązało problem.

Answer 3

Usuń „lepkie” klasę, jeśli nie jest to potrzebne. Pracował dla mnie.

Answer 4

Ten problem został rozwiązany: https://github.com/zurb/foundation/issues/1993

Odpowiedź:

Jeśli nie chcesz, aby przejść do góry określić w danych-opcji:

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

lub na inicjalizacji :

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