3

我希望在 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 中创建粘性顶栏的正确方法是什么？

4

2 回答 2

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>

如您所见，我添加了一个父div，例如“try”，您必须这样做才能告诉sticky必须从哪里开始，所以我使用了data-anchor-top =“try”，但是如果您只添加它并离开它会在顶部只滚动一页。更多我添加了 data-btm-anchor="destroy:bottom" 否则你的设置。

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

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

更好地使用您在页脚中使用的这个 id 或使用页脚 id 如果您想要粘性必须移动到页面末尾其他任何您喜欢的东西希望您理解。

于 2016-01-04T21:38:03.860 回答
0

该BUG已在站点基础6.2.2更新中修复

于 2016-08-02T10:42:57.807 回答