Foundation 5

by Tfranz

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.2.1/css/foundation.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.2.1/css/normalize.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.2.1/js/vendor/jquery.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.2.1/js/vendor/modernizr.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.5/TweenMax.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.2.1/js/foundation.min.js"></script>
<script src="http://www.janpaepke.de/tmp/ScrollMagic_relative_positioning/jquery.scrollmagic.js"></script>
<script src="http://dedo.abozilla.de/scrollmagic/jquery.scrollmagic.debug.js"></script>
<body>
    <div class="body-wrap">
        <header>
            <section style="background-color: #eee;height:200px"></section>
            <div id="navigation-main-wrap" class="navigation-main-wrap">
                <div id="navigation-main" class="navigation-main">
                    <nav class="top-bar container" data-topbar>
                        <ul class="title-area">
                            <li class="name">
                                 <h1><a href="#">awesome</a></h1>

                            </li>
                            <li class="toggle-topbar menu-icon"><a href="#">Menu</a>

                            </li>
                        </ul>
                        <section class="top-bar-section">
                            <!-- Left Nav Section -->
                            <ul class="left">
                                <li><a href="#">Home</a>

                                </li>
                                <li class="has-dropdown"> <a href="#">Products</a>

                                    <ul class="dropdown has-shadow">
                                        <li class="has-dropdown"><a href="#">Film</a>

                               ...

CSS

#navigation-main {
    width: 100%;
}

JavaScript

var controller;
$(document).ready(function ($) {
    // init scrollmagic controller
    controller = new ScrollMagic();
    var scene = new ScrollScene({
        offset: "200"
    })
        .setPin("#navigation-main", {
        pushFollowers: true
    })
        .addTo(controller);

    // show indicators (requires debug extension)
    scene.addIndicators();


});