Foundation Sticky-top-bar is NOT WORKING

Question

我正在用foundation 5创建一个站点。我有一个页面，我希望一个辅助导航栏与页面一起滚动，直到它到达主导航的底部，然后在用户滚动时快速定位并"粘贴"，当它到达该点时，有效地将"固定"添加到顶部栏。该功能在粘性顶部栏部分的基础文档中进行了详细描述和演示（请参阅以下链接）。

http://foundation.zurb.com/docs/components/topbar.html

问题：我无法在我的网站上实现这种行为，即使我直接从上面链接中的工作示例中复制并粘贴粘性顶部条形码。顶杆的所有其他元件都在工作，控制台没有显示任何错误。我已经在一个plunkr:中演示了这个问题

http://embed.plnkr.co/cRdYV5tobUZsd6q2NQxT/preview

请帮我理解这个问题。提前谢谢。

规格：

基础版本：5.5.0jQuery:2.1.0

//TOP-BAR CODE, SAME CODE AS IN PLUNKR
<div class="large-12 columns">
    <div class="sticky">
        <nav class="top-bar" data-topbar="" role="navigation">
            <ul class="title-area">
                <!-- Title Area -->
                <li class="name">
                  <h1><a href="#">Sticky Top Bar</a></h1>
                </li>
                <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
                <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
            </ul>      
            <section class="top-bar-section">
                <!-- Right Nav Section -->
                <ul class="right">
                  <li class="divider hide-for-small"></li>
                  <li><a href="#">Main Item 1</a></li>
                </ul>
            </section>          
        </nav>
    </div>
</div>

更新

更新了带有正确链接的plunkr：http://plnkr.co/edit/8OPKh2sbSn6iq5aN6HF0

我的问题是我在哪里打电话给

$(document).foundation()

由于这是一个Angular应用程序，我最终在中调用了它

app.run

这起到了作用。

Answer 1

在页面底部添加此脚本；）

  <script>
    $(document).foundation();
  </script>

Answer 2

您的plunkr站点出现问题。当页面被加载时，top-bar.js文件不会被加载，所以这个例子永远不会起作用。浏览器控制台显示错误-加载资源失败：服务器的响应状态为404（未找到）http://run.plnkr.co/plunks/cRdYV5tobUZsd6q2NQxT/top-bar.js您需要更新链接以确保已加载top-bar.js文件。

基金会网站上说，只需在foundation.js文件。你的标记应该是这样的：

  <script src="js/vendor/jquery.js"></script>
  <script src="js/foundation/foundation.js"></script>
  <script src="js/foundation/foundation.topbar.js"></script>
  <!-- Other JS plugins can be included here -->
  <script>
    $(document).foundation();
  </script>

Answer 3

要更正的内容很少

1. 确保包装导航的标记或div是直接子级身体标签的（如此重要）
2. 确保直接父母；（body）上没有溢出属性其余正常如果你正在使用bootsrap 4:-像往常一样添加粘性顶部，或者你可以使用单独的javascript tooo将起作用