Как создать липкую верхнюю панель в Foundation 6?

Я хочу создать липкую верхнюю панель в Foundation 6.

В фундаменте 5 это было легко; просто добавьте «липкий» класс в верхнюю панель.

Я считаю, что в Foundation 6 вам необходимо использовать новый атрибут «липкость» (http://foundation.zurb.com/sites/docs/sticky.html) вот так:

 <div data-sticky-container>
    <nav class="top-bar sticky" data-topbar role="navigation" data-sticky>
        <div class="top-bar-left">
            <ul class="menu">
                <li class="menu-text"><a href="#">Website Name</a></li>
            </ul>
        </div>

        <div class="top-bar-right">
            <ul class="menu">
                <li class="active"><a href="/">Home</a></li>
                <!-- ... -->
            </ul>
        </div>
    </nav>
</div>

Однако верхняя панель выглядит странно, поскольку она не занимает всю ширину веб-страницы.

Как правильно создать липкую верхнюю панель в Foundation 6?


css sticky zurb-foundation zurb-foundation-6
person Yahya Uddin    schedule 16.12.2015    source источник
comment
Прикрепленный плагин и верхняя панель еще не работают вместе в Foundation 6. Я спросил разработчиков, и они сказали, что добавят это позже. Прямо сейчас вы можете использовать Magellan и липкий плагин вместе. Проверьте документы Magellan. Также прочтите это: foundation.zurb.com/forum/posts/   -  person Colin Marshall    schedule 17.12.2015
comment
См. foundation.zurb.com/sites/docs/sticky.html.   -  person rogerdpack    schedule 15.10.2018

Ответы (2)


arrow_upward
1
arrow_downward

Я нашел решение и надеюсь, вам понравится. какое решение я нахожу, вы можете свободно использовать его в любом месте страницы, и оно будет работать как Foundation 5. Foundation 6 немного сложнее в липком варианте, ладно, вот код.

    <div id="try">
      <nav class="sticky-container" data-sticky-container>
        <div class="sticky" data-sticky data-top-anchor="try" data-btm-anchor="destroy:bottom" data-margin-top="0" data-margin-bottom="0">
        <div class="row columns">
            <div class="top-bar-left">
                love
            </div>
            <div class="top-bar-left">
                love
            </div>
            <div class="top-bar-left">
                love
            </div>
        </div>
        </div>
    </nav>
</div>

как вы можете видеть, я добавляю родительский div, например "попробуйте", вы должны сделать это, чтобы указать липкому, где должно начинаться липкое, поэтому я использовал data-anchor-top = "try", хорошо, но если вы только добавите это и оставите он пойдет сверху, просто прокрутите страницу немного. для большего я добавил data-btm-anchor = "destroy: bottom" иначе ваши настройки.

для нижнего якоря вам просто нужно добавить div

<div id="destroy">
    finsihed
</div>

Лучше этот идентификатор, который вы использовали в нижнем колонтитуле, или используйте идентификатор нижнего колонтитула, если вы хотите, чтобы липкость была перемещена до конца страницы, иначе все, что вам нравится, надеюсь, вы понимаете.

person Hassan    schedule 04.01.2016

arrow_upward
0
arrow_downward

Ошибка исправлена ​​в обновлении 6.2.2 Foundation для сайтов.

person user3200582    schedule 02.08.2016