Question

我正在创建一个带有基础5的网站。我有一个页面，我想要一个辅助导航栏滚动页面，直到它到达主导航的底部，然后卡入到位并“粘住”用户滚动，在到达该点时有效地将“固定”添加到顶栏。此功能在粘性顶栏部分的基础文档中进行了描述和演示（请参阅以下链接）。

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

问题：我无法在我的网站中实现此行为，即使我直接从上述链接中的工作示例复制并粘贴粘性顶栏代码也是如此。顶栏的所有其他元素都在运行，控制台显示没有错误。我已经在一个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>

更新

使用正确的链接更新了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.topbar.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

纠正的内容很少

确保标记或包裹导航的div是直接子项身体标签（这很重要）！
确保直接父母; （正文）没有溢出属性其余的都很正常如果你像往常一样使用bootsrap 4：-add sticky-top，你也可以使用单独的javascript tooo将工作!!

基础粘性顶栏不起作用

更新

3 个答案: