Sticky Navigation Bar with Skrollr

by Josh

HTML

<link rel="stylesheet" href="https://rawgithub.com/dhg/Skeleton/master/stylesheets/base.css">
<link rel="stylesheet" href="https://rawgithub.com/dhg/Skeleton/master/stylesheets/layout.css">
<link rel="stylesheet" href="https://rawgithub.com/dhg/Skeleton/master/stylesheets/skeleton.css">
<script src="https://rawgithub.com/Prinzhorn/skrollr/master/dist/skrollr.min.js"></script>
<nav class="wrap" data-anchor-target="#content" data-200-top="opacity:0;" data-150-top="visibility:visible; top: -55px; opacity: 0.3;" data-100-top="opacity: 1; position: fixed; top: 0;">
    <div class="container">
        <div class="five columns">My Company</div>
        <div class="eleven columns last">
            <ul>
                <li><a href="#1">Item 1</a>
                </li>
                <li><a href="#2">Item 2</a>
                </li>
                <li><a href="#3">Item 3</a>
                </li>
                <li><a href="#4">Item 4</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
<div id="skrollr-body">
    <header>
         <h1>My Company</h1>

    </header>
    <div id="content">Lorem ipsum...</div>
</div>

CSS

nav {
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid red;
    height: 55px;
    top: 0;
    position: absolute;
    /* hold tight... */
    visibility: none;
    /* we'll override these shortly */
    z-index: 1000;
    width: 100%;
}
nav ul {
    list-style: none;
}
nav li {
    float: left;
    border-right: 1px solid red;
    padding: 0 10px;
}
nav li:last-child {
    border: 0;
}
header {
    background-color: cyan;
    height: 300px;
}
header h1 {
    color: white;
}
#content {
    height: 1000px;
    background-color: gray;
}

JavaScript

skrollr.init()