Menu icon Foundation
Foundation sticky magellan not working

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 definitely picking up the css cdn but the js one im not so sure.

 

<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><a href="#div4_wrapper">4th page</a></li>
        <li><a href="#div3_wrapper">3rd page</a></li>
        <li><a href="#div2_wrapper">2nd page</a></li>
        <li><a href="#div1_wrapper">1st page</a></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>

htmlMagellanFoundation

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 definitely picking up the css cdn but the js one im not so sure.

 

<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><a href="#div4_wrapper">4th page</a></li>
        <li><a href="#div3_wrapper">3rd page</a></li>
        <li><a href="#div2_wrapper">2nd page</a></li>
        <li><a href="#div1_wrapper">1st page</a></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>