Question

我希望在Foundation 6中创建一个粘性顶部栏。

在基础5中，这很容易;只需添加＆＃34;粘贴＆＃34;上课吧。

在基金会6中，我相信你必须使用新的＆＃34;粘性＆＃34;属性（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中创建粘性顶部栏的正确方法是什么？

Answer 1

我找到了解决方案，希望你会喜欢它。我找到的解决方案，你可以在页面的任何地方自由使用它，它将像基础5一样工作。基础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>

你可以看到我添加了像＃34的父div;试试＆＃34;你必须要这样做才能告诉粘性必须从哪里开始，所以我使用了data-anchor-top =＆＃34;试试＆＃34;好的，但是如果你只是添加它并离开它将在顶部只是滚动页面一点点。为了更多，我添加了数据-btm-anchor =＆＃34; destroy：bottom＆＃34;否则你的设置。

对于底部锚点，您只需要添加div

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

更好这个你在页脚中使用的id或使用页脚id如果你想要粘贴必须移动到页面末尾其他任何你希望你理解的内容。

Answer 2

该错误已在网站基础6.2.2 update

中修复

如何在Foundation 6中创建粘性topbar？

2 个答案: