Zurb Foundation 5 中的置顶栏不起作用？答案

【问题标题】：Sticky top-bar in Zurb Foundation 5 doesn't work?Zurb Foundation 5 中的置顶栏不起作用？
【发布时间】：2013-11-29 19:47:44
【问题描述】：

在http://foundation.zurb.com/docs/components/topbar.html 的文档中，它说我应该将我的顶栏<nav> 包装在一个带有contain-to-grid sticky 类的div 中。我的 IDE 具有类自动完成功能，所以我发现 contain-to-grid 类存在，但 sticky 类似乎不存在。结果，由于它调用了一个不存在的类，所以顶栏就像一个普通的一样。

为了澄清，我不是在寻找立即固定的顶栏。我的目标是当我向下滚动页面并且它超过顶部栏的位置时，它才会粘在顶部。

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/foundation.css" />
    <script src="js/modernizr.js"></script>
</head>
<body>
<div class="row">
    <div class="column">
        <p>Test</p>
    </div>
</div>
<div class="contain-to-grid sticky"> <!-- This doesn't seem to work. -->
    <nav class="top-bar" data-topbar>
        <ul class="title-area">
            <li class="name">
                <h1><a href="#">Title</a></h1>
            </li>
        </ul>

        <section class="top-bar-section">
            <ul class="left">
                <li><a href="#">Page 1</a></li>
                <li><a href="#">Page 2</a></li>
                <li><a href="#">Page 3</a></li>
                <li><a href="#">Page 4</a></li>
                <li><a href="#">Page 5</a></li>
                <li><a href="#">Page 6</a></li>
            </ul>
        </section>
    </nav>
</div>
<div class="row">
    <div class="small-12 medium-9 column">
        <p>Main body</p>
    </div>
    <div class="small-12 medium-3 column">
        <p>Sidebar</p>
    </div>
</div>
<script src="js/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
    $(document).foundation();
</script>
</body>
</html>

【问题讨论】：

您好，您可以发布更多代码，jsfiddle 上的一些示例会更好
已更新代码。我现在似乎无法访问 jsfiddle，但仅此而已。我大约一个小时前才下载了 Foundation。
这是当前 Repo 的一个已知问题，大多数 5.0.2 的自定义安装都有棒顶栏，导致每次鼠标滚动都会出错。我们正在等待 Zurb 的修复

标签： javascript css zurb-foundation

【解决方案1】：

这是缩小的 JS 中的一个错字。

在foundation.min.js中搜索stick_topbar并替换为sticky_topbar

大约 2 周前已修复，将与 5.0.3 一起发布 https://github.com/zurb/foundation/commit/5022d75753ea01688aae531d8790b7895cb777c1

【讨论】：

【解决方案2】：

我也遇到了同样的问题，我刚下载了 Foundation 5，但粘滞栏选项不起作用。

这是使用缩小的foundation.js 的Firebug 控制台的输出：

this.settings.sticky_topbar is undefined

当我使用非缩小版本时，错误消失了，但是粘着也不起作用。

如果有人有修复，那就太好了:)！

【讨论】：

编辑：我在导航中使用了与 Propeller 相同的标记。 Foundation 文档中显示的类：'contain-to-grid sticky'