Playing around with scroll and position

by lovromar

HTML

<div class="nav">
    <h1>Scroll Down</h1>
    <ul>
        <li><a href="#">Item 1</a></li><!--
     --><li><a href="#">Item 2</a></li><!--
     --><li><a href="#">Item 3</a></li><!--
     --><li><a href="#">Item 4</a></li>
    </ul>
</div>
<div id="content">
    <p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
    <p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
    <p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
    <p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah...

CSS

html {
    font-size: 100%;
    height: 2000px;
}
.nav {
    background: #bbb;
    color: #fff;
    font: bold 1em/1.5 sans-serif;
    margin-bottom: 3em;
    padding-bottom: 1.5em;
    text-align: center;
    text-transform: uppercase;
}
h1 {
    font-weight: bold;
    padding: 1.5em 0;
}
ul {
    margin: 0 0 0 -1.5em;
    padding: 0 1.5em;
}
li {
    background: #fff;
    display: inline-block;
    margin: 0;
    padding: 0;
    width: 25%;
}
a {
    color: #bbb;
    display: block;
    font: bold 14px/1.5 sans-serif;
    text-decoration: none;
}
a:hover {
    background: #bbb;
    color: #fff;
}
#content {
    margin: 0 auto;
    max-width: 35em;
}
@-webkit-keyframes navChange {
    0% { left: -100%; }
    100% { left: 0; }
}
@media (min-width: 55em) {
    .fixed {
        height: 50px;
        left: 0;
        line-height: 10px;
        position: fixed;
        top: 0;
        width: 9em;
        -webkit-animation: navChange .5s;
    }
    .fixed ul {
        margin: 0;
        padding: 0;
    }
    .fixed li {
        width: 100%;
    }
    .fixed + #content {
        padding-top: 168px;
    }
}

JavaScript

var distance = $('.nav').offset().top + 168;

$(window).scroll(function() {
    if ( $(window).scrollTop() > distance ) {
        $('.nav').addClass('fixed');
    }
});
$(window).scroll(function() {
    if ( $(window).scrollTop() <= distance ) {
        $('.nav').removeClass('fixed');
    }
});