Foundation Sticky-top-bar 不工作

Question

我正在用 foundation 5 创建一个网站。我有一个页面，我希望在其中有一个辅助导航栏随页面滚动，直到它到达主导航的底部，然后卡入到位并 'stick' 当用户滚动时，在到达该点时有效地将 'fixed' 添加到顶部栏。此功能在粘性顶部栏部分的基础文档中进行了准确描述和演示（请参阅以下 link）。

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

问题：我无法在我的站点中实现此行为，即使我直接从上面的工作示例中复制并粘贴粘性顶部栏代码也是如此 link。 top-bar 的所有其他元素都在运行，并且控制台没有显示任何错误。我已经在 plunkr 中演示了这个问题：

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

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

规格：

基础版本：5.5.0 jQuery: 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>

更新

使用正确的 links 更新了 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 您需要更新 link 以确保加载 top-bar.js 文件。

The foundation website says Just add foundation.topbar.js AFTER the foundation.js file. Your markup should look something like this:

  <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

需要更正的内容很少

确保包装导航的标签或 div 是直接的 child body 个标签（这个很重要）！
确保直接parent； (body) 上没有溢出属性其余正常如果您使用的是 bootsrap 4 :-add sticky-top 像往常一样或者您可以使用分开 javascript 也行!!

Foundation Sticky-top-bar 不工作

Foundation Sticky-top-bar is NOT WORKING

zurb-foundation-5

更新