Foundation sticky magellan not working - html

Question

Im trying to create a little nav that takes me to certain divs on click. It does that, but at the moment it just snaps down to the div. Instead i want a smooth transition down just like it says it should in the documentation.
Also, as i scroll down to the certain divs i want the neccessary nav li's to be highlighted. But when i inspect element on them they dont highlight as i scroll down the page at the moment.. It's definetely picking up the css cdn but the js one im not so sure.
Head (Im using a cdn)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/foundation/6.2.4-rc2/foundation.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.4-rc2/foundation.min.css">
<section id="div1_wrapper" data-magellan-target="div1_wrapper">
<div class="leftHeaders" data-sticky-container>
<ul class="sticky" data-sticky data-magellan>
<li>4th page</li>
<li>3rd page</li>
<li>2nd page</li>
<li>1st page</li>
</ul>
</div>
</section>
<section id="div2_wrapper" data-magellan-target="div2_wrapper">
</section>
<section id="div3_wrapper" data-magellan-target="div3_wrapper">
</section>
<section id="div4_wrapper" data-magellan-target="div4_wrapper">
</section>

Answer 1

$(document).foundation();
li {
list-style: none outside;
}
#div2_wrapper,
#div3_wrapper,
#div4_wrapper {
height:100%;
border:1px solid blue;
}
.sticky ul li {
padding: 5px;
}
.active {
border: 1px solid red;
padding: 10px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/foundation/6.2.4-rc2/foundation.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.4-rc2/foundation.min.css">
<section id="div1_wrapper" data-magellan-target="div1_wrapper">
<div class="leftHeaders" data-sticky-container>
<div class="sticky" data-sticky-on="small" data-sticky data-margin-top="0" data-anchor="content">
<ul data-magellan>
<li>4th page</li>
<li>3rd page</li>
<li>2nd page</li>
<li>1st page</li>
</ul>
</div>
</div>
</section>
<section id="div2_wrapper" data-magellan-target="div2_wrapper">
</section>
<section id="div3_wrapper" data-magellan-target="div3_wrapper">
</section>
<section id="div4_wrapper" data-magellan-target="div4_wrapper">
</section>