Zurb Foundation 5中的粘性顶部栏不起作用？

Question

On the documentation here http://foundation.zurb.com/docs/components/topbar.html , it says that I should wrap my top-bar <nav> in a div with the class contain-to-grid sticky . 在http://foundation.zurb.com/docs/components/topbar.html上的文档中，它说我应该将顶层<nav>包装在div中，其类为contain-to-grid sticky 。 My IDE has class auto-completion so I kinda figured out that contain-to-grid class is there but the sticky class doesn't seem to exist. 我的IDE具有自动完成的类，因此我有点想知道有contain-to-grid类，但sticky类似乎不存在。 As a result, since it's calling a non-existing class, the top-bar just acts as a regular one. 结果，由于它调用的是不存在的类，因此顶栏只是充当常规类。

To clarify I am not looking for an immediately fixed top-bar. 为了澄清，我不是在寻找立即固定的顶部栏。 What I'm aiming for is when I scroll down the page and it went past the position of the top-bar, only then will it stick to the top. 我的目标是当我向下滚动页面时，它越过顶部栏的位置，然后它才会停留在顶部。

<!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>

Answer 1

It's a typo in the minified JS. 这是缩小版JS中的错字。

Search for stick_topbar and replace with sticky_topbar in foundation.min.js 在foundation.min.js中搜索stick_topbar并替换为sticky_topbar

It was fixed almost 2 weeks ago and will be released with 5.0.3 https://github.com/zurb/foundation/commit/5022d75753ea01688aae531d8790b7895cb777c1 它已在大约2周前修复，并将与5.0.3版一起发布https://github.com/zurb/foundation/commit/5022d75753ea01688aae531d8790b7895cb777c1

Answer 2

I've got the same problem, I just downloaded Foundation 5 and sticky bar option doesn't work. 我遇到了同样的问题，我刚刚下载了Foundation 5，但粘性栏选项不起作用。

Here's the output of Firebug console using the minified foundation.js : 这是使用最小化的foundation.js的Firebug控制台的输出：

this.settings.sticky_topbar is undefined

When I use the non-minifed version, the error disappear, however sticky doesn't work too with it. 当我使用非最小版本时，错误消失了，但是粘性也无法解决。

If someone has a fix it would be really great :) ! 如果有人修复了，那就太好了:)！

Zurb Foundation 5中的粘性顶部栏不起作用？

问题描述

2 个解决方案

解决方案1
6 已采纳 2013-12-05 21:03:30

解决方案2
0 2013-12-05 15:34:21

Zurb Foundation 5中的粘性顶部栏不起作用？

问题描述

2 个解决方案

解决方案1 6 已采纳 2013-12-05 21:03:30

解决方案2 0 2013-12-05 15:34:21

解决方案1
6 已采纳 2013-12-05 21:03:30

解决方案2
0 2013-12-05 15:34:21