Foundation Sticky-top-bar is NOT WORKING - zurb-foundation-5

Question

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>Sticky Top Bar</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"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="divider hide-for-small"></li>
<li>Main Item 1</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.

Answer 1

Add this script at the bottom of your page ;)
<script>
$(document).foundation();
</script>

Answer 2

There is a problem with your plunkr site. When the page is loaded the top-bar.js file is not loaded, so this example will never work.
The browser console shows the error - Failed to load resource: the server responded with a status of 404 (Not Found) http://run.plnkr.co/plunks/cRdYV5tobUZsd6q2NQxT/top-bar.js
You need to update the link to ensure the top-bar.js file is loaded.
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

Few stuff to corrected
make sure tag or the div that wrap your navigation is direct child
of body tag (this important)!
make sure the direct parent; (body) has no overflow property on it
The rest is normal
if you are using bootsrap 4 :-add sticky-top as usual or you can use
separate javascript tooo will work !!