-1

I am creating a site with foundation 5. I have a page in which I would like a secondary navigation bar to scroll with the page until it reaches the bottom of the primary navigation, then snap into place and 'stick' while the user scrolls, effectively adding 'fixed' to the top-bar when it reaches that point. This functionality is described AND demonstrated exactly in the foundation documentation in the sticky top-bar section (see following link).

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

PROBLEM: I am unable to implement this behavior in my site, even if I copy and paste the sticky top-bar code directly from the working example in the above link. All other elements of top-bar are functioning and the console shows no errors. I have demonstrated the issue in a plunkr:

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

please help me understand the issue. Thank you in advance.

Specifications:

Foundation version: 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>

UPDATE

Updated plunkr with proper links: http://plnkr.co/edit/8OPKh2sbSn6iq5aN6HF0

My issue was where I was calling

$(document).foundation()

as this is an Angular application, I ended up calling it in

app.run

which worked.

4

3 回答 3

1

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

  <script>
    $(document).foundation();
  </script>
于 2015-03-02T13:40:27.603 回答
0

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

基金会网站说只需在foundation.js 文件之后添加foundation.topbar.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>
于 2015-03-08T08:15:50.710 回答
-1

需要纠正的东西很少

  1. 确保标签或包装导航的 div 是 body 标签的直接子标签（这很重要）！
  2. 确保直接父母；(body) 上面没有溢出属性如果您使用 bootsrap 4，其余的都是正常的：-像往常一样添加sticky-top，或者您也可以使用单独的 javascript 也可以！
于 2017-12-14T06:41:23.927 回答