Фонд 6 Магеллан липкий, не работающий с Zurb template cli install

Question

Я пытаюсь использовать Magellan в установке cli шаблона Zurb fdn6. Страница работает нормально, но Magellan просто не работает для липкого нав и выдает следующее сообщение об ошибке консоли:
Uncaught TypeError: Cannot read property 'top' of undefined

Казалось бы Магеллан регистрации потому, что при просмотре источника в Devtools я могу увидеть data-sticky attr, регистрирующий значение, и класс active применяется к якорям при прокрутке вверх/вниз.

Тем не менее, я отмечаю классы, которые не являются: is-at-top is-stuck и, похоже, это то, что делает вещь «палкой». Они отображаются в примере Zurb docs.

В app.js У меня есть $(document).foundation();, и когда страница работает, я вижу, что модуль Magellan фактически загружается. Но липкий навигатор просто не прилипает к верхней части окна, он просто не работает в этой настройке.

Я использовал следующий стандартный пример из Zurb Fdn Magellan docs:

<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> 

Я видел другие примеры SO фиксированный, но все они, казались, использовать сборки, кроме tempate Zurb и обычно загружаются плагины через стандартные <script src="xyz"> звонков ,

Кто-нибудь знает, что случилось с этим примером шаблона Zurb?

Answer 1

В отличие от F5, элементы, липкие в Foundation 6, немного сложны и расстраивают, чтобы быть откровенным. Вы не просто получите его с первой попытки.

В F6, чтобы сделать Magellan или любой элемент липкий, опорная точка необходима для активировать липкости.

В этом случае у вас должен быть корень div с идентификатором topAnchorExample, а затем написать следующий набор генерирующих кодов Магелланов.

Попробуйте сделать это:

<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> 

И постарайтесь не говоря уже о встроенном CSS - ширина: 100%. Думаю, вы позаботитесь об этом.