Foundation 6 Magellan sticky не работает с установкой шаблона Zurb cli

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

Похоже, что Magellan регистрирует, потому что при просмотре исходного кода в DevTools я вижу, что атрибут data-sticky регистрирует значение, а класс active применяется к привязкам при прокрутке вверх/вниз.

Однако я заметил, что классы, которые не регистрируются, это: is-at-top is-stuck и, похоже, это то, что делает эту вещь "прилипающей". Они появляются в примере документов Zurb.

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

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

<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, но все они, похоже, использовали сборки, отличные от шаблона Zurb, и обычно загружали плагины с помощью стандартных вызовов <script src="xyz">.

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


javascript navbar sticky zurb-foundation-6 magellan
person redplanet    schedule 16.07.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

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

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

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

    <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%. Я думаю, вы позаботитесь об этом.

person Hari Harker    schedule 16.07.2016
comment
Извините за задержку с ответом. Я понимаю, что вы имеете в виду, но это все еще не работает для меня! Я получаю точно такой же результат - Magellan регистрируется, но не применяет необходимые классы, чтобы он закрепился, и я все еще получаю ту же ошибку консоли. Просто повторюсь, это в шаблоне Zurb через установку cli с использованием структуры Handlebars/Panini. Я пробовал это как в ./src/pages/index.html, так и в ./src/pages/index.html, но ни один из них не работает. - person redplanet; 17.07.2016