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>
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.
Add this script at the bottom of your page ;)
<script>
$(document).foundation();
</script>