jQuery Sticky Menu

by Harsh Bhatnagar

HTML

<div class="container">

    <header>
        <p> Nam rhoncus facilisis velit, nec faucibus nunc lobortis eget. Etiam quis pulvinar neque.</p>
    </header>

    <nav>
        <ul>
            <li><a href="#">Opción 1</a></li>
            <li><a href="#">Opción 2</a></li>
            <li><a href="#">Opción 3</a></li>
            <li><a href="#">Opción 4</a></li>
            <li><a href="#">Opción 5</a></li>
            <li><a href="#">Opción 6</a></li>
        </ul>
    </nav>

    <div class="content">

        <h1>No olvides visitar <a href="http://tuts.widget-pc.com">Widget 101</a></h1>

        <p> Vestibulum massa tellus, elementum in viverra ac, pharetra eget ligula. Aenean vulputate condimentum libero, sed tincidunt</p>

        <h1>Cómo hacer un Sticky Menu</h1>

        <p> Duis vitae ante sed lorem scelerisque eleifend. Etiam pretium blandit nisi sit amet laoreet.</p>

        <h1>Esto es contenido de relleno</h1>




        <p> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus sit amet vehicula sem. Praesent augue enim, ullamcorper id convallis ultrices, egestas et nunc.</p>

        <h1>Esto es un título</h1>

        <p>Duis vitae ante sed lorem scelerisque eleifend. Etiam pretium blandit nisi sit amet laoreet.</p>

        <p> Maecenas consectetur pharetra nisl, vitae porta nibh varius sed. In pharetra, sem a vulputate pellentesque, arcu sem varius enim, at laoreet justo dui dictum dolor.</p>

        <p> Nam sed ante pharetra arcu rutrum sagittis et sit amet metus. Aenean vel sapien ut odio vestibulum viverra vel vel nisl. Sed pretium ligula non justo convallis ac tincidunt eros suscipit. Mauris dignissim ultricies purus non pulvinar. </p>

        \

        <h1>Este es otro título</h1>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus facilisis velit, nec faucibus nunc lobortis eget. Etiam quis pulvinar neque. Nam sed ante pharetra arcu rutrum sagittis et sit...

CSS

* {
    margin: 0;
    padding: 0;
}

html {
    font-family: Arial, Helvetica;
    font-size: 12px;
    color: #eee;
}

body {
    background-color: #222;
}

h1 {
    font-family: Helvetica, Arial;
    font-size: 40px;
    font-weight: bold;
    margin: 10px 0 10px 0;
}

h1 a {
    text-decoration: none;
    color: #8cbf26;
}

h1 a:hover {
    text-decoration: underline;
}

p {
    margin-bottom: 15px;
    text-align: justify;
}

header {
    color: yellow;
    max-width: 960px;
    margin: auto;
    margin-top: 20px;
}

.content,
footer {
    max-width: 960px;
    margin: auto;
}


/*** Sticky Menu ***/

nav {
    background-color: #1ba1e2;
    height: 35px;
}

nav ul {
    width: 960px;
    margin: auto;
}

nav ul li {
    line-height: 35px;
    display: inline-block;
    padding-right: 50px;
}

nav ul li a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
}

nav ul li a:hover {
    text-decoration: underline;
}

.fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

JavaScript

// Llamado cuando se cargue la página
posicionarMenu();

$(window).scroll(function() {
    posicionarMenu();
});

function posicionarMenu() {
    var altura_del_header = $('header').outerHeight(true);
    var altura_del_menu = $('nav').outerHeight(true);

    if ($(window).scrollTop() >= altura_del_header) {
        $('nav').addClass('fixed');
        $('.content').css('margin-top', (altura_del_menu) + 'px');
    } else {
        $('nav').removeClass('fixed');
        $('.content').css('margin-top', '0');
    }
}