Foundation 6 Magellan sticky funktioniert nicht mit Zurb Vorlage cli installiere

Question

Ich versuche, Magellan in einer CLI-Installation der Zurb fdn6 Vorlage zu verwenden. Die Seite läuft gut, aber Magellan funktioniert einfach nicht für die klebrige nav und führt den folgenden Konsole Fehler:
Uncaught TypeError: Cannot read property 'top' of undefined

Es wäre Magellan erscheinen ist Registrierung, weil, wenn die Quelle in DevTools sehen ich die data-sticky sehen attr registriert einen Wert und active Klasse wird auf die Anker beim Scrollen nach oben/unten angewendet.

Allerdings bemerke ich Klassen, die sind nicht Registrierung sind: is-at-top is-stuck und diese scheinen zu sein, was die Sache "Stick" macht. Sie tauchen im Beispiel von Zurb auf. In app.js habe ich $(document).foundation(); und wenn die Seite läuft kann ich sehen, dass das Magellan Modul tatsächlich geladen wird Aber das sticky nav ist einfach nicht am oberen Rand des Fensters, es funktioniert einfach nicht in diesem Setup.

ich folgende Standardbeispiel von Zurb Fdn Magellan docs: verwendet haben

<div data-sticky-container> 
    <div class="sticky" id="example" data-sticky data-margin-top="0" style="width:100%;" data-margin-bottom="0" data-top-anchor="topAnchorExample" data-btm-anchor="bottomOfContentId:bottom"> 
     <nav data-magellan> 
      <ul class="horizontal menu expanded"> 
       <li><a href="#first">First Arrival</a></li> 
       <li><a href="#second">Second Arrival</a></li> 
       <li><a href="#third">Third Arrival</a></li> 
      </ul> 
     </nav> 
    </div> 
</div> 

Ich habe andere SO festen Beispiele gesehen, aber sie schienen alle Builds zu verwenden, um andere als die ZURB tempate und geladen allgemein die Plugins über Standard <script src="xyz"> Anrufe .

Weiß jemand, was los ist mit diesem Beispiel von Zurb Vorlage?

Answer 1

Im Gegensatz zu F5 ist das Erstellen von Elementen in Foundation 6 ein bisschen knifflig und frustrierend, um ehrlich zu sein. Sie bekommen es nicht nur beim ersten Versuch.

In F6, die Magellan oder jedes Element klebrig zu machen, ein Bezugspunkt ist notwendig, um die Klebrigkeit aktiviert.

In diesem Fall müssen Sie einen Stamm div mit der ID topAnchorExample haben und dann den nächsten Satz von Magellan Generierungscodes schreiben.

Versuch dies zu tun:

<div id="topAnchorExample"> 
    <div data-sticky-container> 
     <div class="sticky" id="example" data-sticky data-margin-top="0" style="width:100%;" data-margin-bottom="0" data-top-anchor="topAnchorExample" data-btm-anchor="bottomOfContentId:bottom"> 
     <nav data-magellan> 
     <ul class="horizontal menu expanded"> 
      <li><a href="#first">First Arrival</a></li> 
      <li><a href="#second">Second Arrival</a></li> 
      <li><a href="#third">Third Arrival</a></li> 
     </ul> 
     </nav> 
     </div> 
    </div> 
    </div> 

Und nicht versuchen, das Inline-CSS zu erwähnen - Breite: 100%. Ich schätze, du wirst dafür sorgen.