mobile fixed

by lovromar

HTML

<ul id="nav">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>

<div id="content">
<p>Ridiculus etiam nec lorem rhoncus dictumst, auctor nunc lundium dis ac egestas! Auctor in eu, porta ac arcu nec, ac adipiscing? Egestas non integer dis, phasellus enim dignissim nec tincidunt tristique a tincidunt penatibus augue eu? Nascetur integer aenean pulvinar nisi hac, eu nisi amet, mattis, mattis penatibus, lorem eu magna sed augue adipiscing! Et in, porttitor scelerisque non natoque duis parturient ut, ridiculus, vut porta! Sit proin dictumst phasellus. Turpis habitasse, in, augue augue etiam, dolor cras, diam nec placerat lundium sociis ac, natoque nisi ac amet, sed elit amet hac. Porttitor mauris dictumst, scelerisque, pid integer etiam integer, enim, dis aenean auctor a vel nisi cum. Elementum! Sit lundium ac. Dapibus purus, lacus enim et vut dapibus integer.

Nec sed, purus tincidunt lundium dolor a nascetur dapibus eros tincidunt porttitor quis ultrices magna, diam elementum massa eu? Facilisis rhoncus placerat sed? Nec odio ridiculus lorem ultricies urna ridiculus aliquet risus in magna auctor, elementum, porttitor mattis augue ultricies penatibus dis phasellus sit. In turpis diam parturient ridiculus diam integer? Eu arcu? Adipiscing tincidunt est? Ut phasellus porta? Natoque lacus dignissim pellentesque risus pellentesque tincidunt et mauris, parturient amet purus, velit in? Nunc, cum placerat nec montes massa nec vel auctor mauris rhoncus scelerisque mauris, vel etiam. Augue. Turpis platea tortor porttitor, ut nunc, scelerisque urna ultrices risus amet et rhoncus porttitor, velit, adipiscing pulvinar augue purus augue turpis odio pulvinar cursus? Ut quis porta, enim, augue integer.

Pid, parturient pulvinar enim auctor? Cursus habitasse purus platea sit turpis, augue in nunc. Penatibus! Placerat dignissim elementum proin ac, dictumst in aenean ac, aenean massa sit urna nunc in integer lorem mattis in turpis ac...

CSS

#nav {
    width: 100%;
    height: 2em;
    background: #000;
    border-width: 0.3em 0;
    border-style: solid;
    border-color: #aaa;
    position: absolute;
    top: 0;
}

#nav li {
    float: left;
    height: 100%;
    margin-right: 1em;
}

#nav a {
    padding: 0 1em;
    height: 100%;
    display: block;
    text-decoration: none;
    color: #f60;
    line-height: 2;
}

#nav a:hover {
    background: #aaa;
    color: #fff;
}

#content {
    margin: 3em;
}

p {
    margin: 0;
    line-height: 1.4;
}

JavaScript

var $windowTag = $(window);
var $fixedElement = $("#nav");
var fixedElementOffSet = $fixedElement.offset().top;

$windowTag.scroll(function() {

    var scrollTop = $windowTag.scrollTop();

    if (fixedElementOffSet < scrollTop) {
        $fixedElement.css('top', scrollTop);
    } else {
        $fixedElement.css('top', 0);
    }
});