fmagrosoto/Elementos en sticky style

## Elementos en sticky style
<!DOCTYPE html>
<html lang="es-MX">
    <head>
        <meta charset="UTF-8" />
        <title>Elementos en sticky mode</title>
        <link href='http://fonts.googleapis.com/css?family=Raleway:400,200'
              rel='stylesheet' type='text/css'>
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <style>

            body {
                font-family: 'Raleway', sans-serif;
                font-size: 100%;
                color: rgb(51,51,51);
                background: whitesmoke;
            }
            section {
                position: relative;
                width: 62.5em; /* 1000 / 16 */
                padding: .625em;
                margin: auto;
                background: pink;
            }

            section nav {
                position: relative;
                background: black;
                color: white;
                padding: 1.25em;
                width: 43.75em;
                margin: auto;
                text-align: center;
                overflow: auto;
            }

            section nav ul {
                margin: 0;
                padding: 0;
                list-style-type: none;
                display: inline-block;
            }

            section nav ul li {
                float: left;
                margin-right: 25px;
            }

            section nav ul li:last-child {
                margin-right: 0;
            }

            section nav ul li a {
                color: white;
                text-decoration: none;
            }

            section nav ul li a:hover {
                color: yellow;
            }


            section header {
                background: gray;
                color: whitesmoke;
                padding: 1.25em;
            }

            section article {
                position: relative;
                padding: 1.25em;
                padding-right: 3.5em;
                padding-left: 3.5em;
            }

            section article p {
                text-align: justify;
                margin-top: 0;
            }

            section article #menu-seguidor {
                position: absolute;
                width: 120px;
                background: green;
                padding: .625em;
                top: 100px;
                right: -100px;
                font-size: .875em;
            }
            section article #menu-seguidor:after {
                content: "";
                width: 0px;
                height: 0px;
                border-style: solid;
                border-width: 0 75px 25px 0;
                border-color: transparent #666600 transparent transparent;
                position: absolute;
                bottom: -25px;
                left: 0;
            }

            section article #menu-seguidor:before {
                content: "";
                width: 0px;
                height: 0px;
                border-style: solid;
                border-width: 10px 0 10px 28px;
                border-color: transparent transparent transparent #000000;
                position: absolute;
                bottom: -35px;
                left: 47px;
            }

            section article #menu-pegajoso {
                position: absolute;
                padding: .625em;
                top: 200px;
                left: -120px;
                font-size: .875em;
            }

            section article #menu-pegajoso ul {
                position: static;
                width: 120px;
                background: red;
                z-index: 200;
            }

            footer {
                font-size: .875em; /* 14 / 16 */
                font-weight: 200;
                width: 56.25em; /*900 / 16 */
                margin: auto;
            }
            footer p{
                margin: 0;
                padding: 0;
            }
            #navegacion-flotante {
                position: fixed;
                top: -75px;
                background: black;
                padding: .9375em;
                z-index: 100;
                text-align: center;
            }

            #navegacion-flotante ul {
                margin: 0;
                padding: 0;
                list-style-type: none;
                display: inline-block;
            }

            #navegacion-flotante ul li {
                float: left;
                margin-right: 25px;
            }

            #navegacion-flotante ul li:last-child {
                margin-right: 0;
            }

            #navegacion-flotante ul li a {
                color: white;
                text-decoration: none;
            }

            #navegacion-flotante ul li a:hover {
                color: yellow;
            }
        </style>

        <script>
            $(document).ready(function(){
                var navFija = $('#navegacion-fija').offset().top; // posición actual del elemento
                var menuSeg = $('#menu-seguidor').offset().top; // posición actual del elemento
                var menuPeg = $('#menu-pegajoso').offset().top; // posición actual del elemento

                // Tamaño del div en FIXED
                // para evitar que aparezcan las barras de navegación
                // horizontal y vertila al poner el width en 100%
                $("#navegacion-flotante").css({
                    width: $(window).width()
                });

                // funciones para que la magia suceda
                $(window).scroll(function(){

                    // para la barra de navegción con fondo negro
                    if($(window).scrollTop() < navFija){
                        $('#navegacion-flotante').stop().animate({
                            top: -75
                        },'fast');
                    } else {
                        $('#navegacion-flotante').stop().animate({
                            top: 0
                        },'fast');
                    }


                    // Para menú con fondo verde
                    if ($(window).scrollTop() > menuSeg) {
                        $('#menu-seguidor').stop().animate({
                            marginTop: $(window).scrollTop() - menuSeg + 200
                        });
                    } else {
                        $('#menu-seguidor').stop().animate({
                            marginTop: 0
                        });
                    }


                    // Para menú con fondo rojo
                    if ($(window).scrollTop() > menuPeg){
                        $('#menu-pegajoso ul').css({ position: 'fixed', top: 0 });
                    } else {
                        $('#menu-pegajoso ul').css('position','static');
                    }

                });

            });
        </script>
    </head>
    <body>

        <div id="navegacion-flotante">
            <ul>
                <li><a href="javascript:void(0);">Link 01</a></li>
                <li><a href="javascript:void(0);">Link 02</a></li>
                <li><a href="javascript:void(0);">Link 03</a></li>
                <li><a href="javascript:void(0);">Link 04</a></li>
                <li><a href="javascript:void(0);">Link 05</a></li>
            </ul>
        </div>

        <section>

            <header>
                <h1>Elementos en <em>sticky mode</em></h1>
                <p><em>Tutorial para crear elementos que sigan el flujo natural del
                scroll bar pero que, al llegar a un momento específico, se queden
                "pegados" en la página para que no se pierdan de vista dentro del
                viewport o pantalla activa.</em></p>
                <p>Haremos varias versiones de éste técnica que tendrán efectos
                diferentes pero visualmente enriquecedoras, las cuales, sin duda,
                fortalecerán la experiencia del usuario.</p>
            </header>

            <nav id="navegacion-fija">
                <ul>
                    <li><a href="javascript:void(0);">Link 01</a></li>
                    <li><a href="javascript:void(0);">Link 02</a></li>
                    <li><a href="javascript:void(0);">Link 03</a></li>
                    <li><a href="javascript:void(0);">Link 04</a></li>
                    <li><a href="javascript:void(0);">Link 05</a></li>
                </ul>
            </nav>

            <article>

                <div id="menu-pegajoso">
                    <ul>
                        <li><a href="javascript:void(0);">Link 01</a></li>
                        <li><a href="javascript:void(0);">Link 02</a></li>
                        <li><a href="javascript:void(0);">Link 03</a></li>
                        <li><a href="javascript:void(0);">Link 04</a></li>
                        <li><a href="javascript:void(0);">Link 05</a></li>
                    </ul>
                </div>

                <div id="menu-seguidor">
                    <ul>
                        <li><a href="javascript:void(0);">Link 01</a></li>
                        <li><a href="javascript:void(0);">Link 02</a></li>
                        <li><a href="javascript:void(0);">Link 03</a></li>
                        <li><a href="javascript:void(0);">Link 04</a></li>
                        <li><a href="javascript:void(0);">Link 05</a></li>
                    </ul>
                </div>

                <div class="primer-bloque">
                <p><img src="http://placehold.it/200&text=Imagen ficticia"
                        style="float: left; margin: 0 20px 20px 0;">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu
                viverra augue. Cras interdum sem ut sapien feugiat ultricies. Fusce quis
                fermentum augue. Nunc rhoncus, est nec dignissim consectetur, purus neque
                tempus mauris, non gravida sapien tellus non est. Vestibulum a aliquet
                justo. Maecenas urna enim, bibendum at porta ac, congue id urna. Nullam
                consectetur urna urna, nec dapibus purus facilisis ac. Pellentesque
                habitant morbi tristique senectus et netus et malesuada fames ac turpis
                egestas. Maecenas vel mollis ipsum. Sed ac dapibus velit, id gravida nibh.
                Nulla mattis lectus sed sem elementum, congue vehicula mi auctor. Nulla
                tempus, nisi ac tempus scelerisque, lectus lacus laoreet mi, vel mattis
                velit mauris eget neque. Vivamus vulputate eros at dignissim porttitor.
                Suspendisse varius, turpis id lacinia dignissim, ante felis congue odio,
                non tempus sapien metus et ligula. Praesent nunc lectus, tincidunt at
                velit sodales, blandit suscipit quam. Donec libero nulla, luctus eu nisi
                vel, blandit fermentum quam.</p>

                <p>Morbi ultricies aliquet tortor lobortis placerat. Vestibulum
                    scelerisque mollis sagittis. Etiam fermentum sem eget congue congue.
                    Sed non elit facilisis, molestie eros vitae, fringilla quam.
                    Curabitur et egestas mauris. Nulla egestas quam id quam pretium, et
                    interdum metus tincidunt. Nunc quam dui, tristique et viverra quis,
                    consequat eget dui. Nullam ut justo id risus mattis accumsan id a
                    nibh. Praesent feugiat mattis tellus imperdiet mattis. Pellentesque
                    nec nisl vel sapien ultrices tempus. Cum sociis natoque penatibus et
                    magnis dis parturient montes, nascetur ridiculus mus. Pellentesque
                    sagittis ut odio nec bibendum.</p>

                <p>Nam aliquet mi arcu, vitae lacinia massa eleifend sit amet. Sed id
                    fermentum nunc. Aliquam luctus nulla augue, a lobortis risus congue
                    eget. Morbi porta augue at cursus gravida. Maecenas auctor porttitor
                    nibh. Sed elementum nibh ipsum, imperdiet pellentesque nisl aliquam
                    at. Suspendisse molestie enim quis massa sodales, vel lobortis quam
                    convallis. Aliquam pellentesque consequat eros, ornare tincidunt
                    tellus pulvinar in. Vivamus commodo facilisis tincidunt. Nullam
                    ornare fermentum hendrerit. Pellentesque semper velit mi, id iaculis
                    nulla blandit porttitor.</p>

                <p>Aliquam bibendum tempor diam non eleifend. Cras sapien tortor, viverra
                    vitae augue et, mattis dictum ligula. Integer sagittis tincidunt
                    auctor. Nulla facilisi. Curabitur ut ante at nulla euismod luctus
                    quis id nunc. Suspendisse in augue vitae nulla consequat auctor.
                    In aliquet convallis ultrices. Etiam porta adipiscing metus, vel
                    facilisis velit cursus in. Praesent rutrum velit ut erat sodales, id
                    rhoncus sapien suscipit. Phasellus placerat dignissim malesuada.
                    Aliquam vitae auctor velit. Donec vestibulum, ligula ac aliquet
                    varius, lorem tellus posuere tellus, a porta neque orci quis metus.
                    Praesent ultrices metus vitae mi tempus, ac molestie ligula rutrum.
                    Sed vel sem id urna aliquam placerat dapibus vel sem. Cras vel magna
                    nec tellus eleifend malesuada eget sed risus. Sed et nibh sed libero
                    posuere adipiscing sed eu nunc.</p>

                <p>Mauris in venenatis nunc. Aenean vulputate vestibulum tincidunt. Proin
                    porta sodales erat, at sodales leo semper id. Cras faucibus
                    consectetur erat, nec scelerisque nibh sagittis quis. Ut lorem purus,
                    fermentum quis sodales eu, ultricies vitae orci. Ut rhoncus tempor
                    tortor, a rutrum nisi tristique interdum. Duis molestie consequat
                    urna, in volutpat nisl commodo at. Proin in elit venenatis, tempor
                    purus eget, commodo turpis. Donec scelerisque tempus turpis sed
                    egestas. Suspendisse tincidunt sollicitudin sem non vulputate.
                    Maecenas quis varius erat, ultricies ullamcorper velit. Vestibulum
                    feugiat quam lectus, nec malesuada enim iaculis in. Integer pharetra,
                    erat ac vulputate dictum, eros tellus lobortis eros, posuere ultrices
                    sem dolor a felis.</p>
                </div>

                <div class="segundo-bloque" style="-webkit-column-count:3; -moz-column-count:3;
                     margin-top: 20px;">
                    <p><img src="http://placehold.it/100&text=Imagen ficticia"
                        style="float: left; margin: 0 10px 10px 0;">Mauris in venenatis
                        nunc. Aenean vulputate vestibulum tincidunt.
                        Proin porta sodales erat, at sodales leo semper id. Cras faucibus
                        consectetur erat, nec scelerisque nibh sagittis quis. Ut lorem
                        purus, fermentum quis sodales eu, ultricies vitae orci. Ut
                        rhoncus tempor tortor, a rutrum nisi tristique interdum. Duis
                        molestie consequat urna, in volutpat nisl commodo at. Proin in
                        elit venenatis, tempor purus eget, commodo turpis. Donec
                        scelerisque tempus turpis sed egestas. Suspendisse tincidunt
                        sollicitudin sem non vulputate. Maecenas quis varius erat,
                        ultricies ullamcorper velit. Vestibulum feugiat quam lectus,
                        nec malesuada enim iaculis in. Integer pharetra, erat ac
                        vulputate dictum, eros tellus lobortis eros, posuere ultrices
                        sem dolor a felis.

                        Mauris in venenatis nunc. Aenean vulputate vestibulum tincidunt.
                        Proin porta sodales erat, at sodales leo semper id. Cras faucibus
                        consectetur erat, nec scelerisque nibh sagittis quis. Ut lorem
                        purus, fermentum quis sodales eu, ultricies vitae orci. Ut
                        rhoncus tempor tortor, a rutrum nisi tristique interdum. Duis
                        molestie consequat urna, in volutpat nisl commodo at. Proin in
                        elit venenatis, tempor purus eget, commodo turpis. Donec
                        scelerisque tempus turpis sed egestas. Suspendisse tincidunt
                        sollicitudin sem non vulputate. Maecenas quis varius erat,
                        ultricies ullamcorper velit. Vestibulum feugiat quam lectus,
                        nec malesuada enim iaculis in. Integer pharetra, erat ac
                        vulputate dictum, eros tellus lobortis eros, posuere ultrices
                        sem dolor a felis.
                    </p>
                </div>
                <div class="primer-bloque" style="margin-top: 20px;">
                <p><img src="http://placehold.it/200&text=Imagen ficticia"
                        style="float: left; margin: 0 20px 20px 0;">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu
                viverra augue. Cras interdum sem ut sapien feugiat ultricies. Fusce quis
                fermentum augue. Nunc rhoncus, est nec dignissim consectetur, purus neque
                tempus mauris, non gravida sapien tellus non est. Vestibulum a aliquet
                justo. Maecenas urna enim, bibendum at porta ac, congue id urna. Nullam
                consectetur urna urna, nec dapibus purus facilisis ac. Pellentesque
                habitant morbi tristique senectus et netus et malesuada fames ac turpis
                egestas. Maecenas vel mollis ipsum. Sed ac dapibus velit, id gravida nibh.
                Nulla mattis lectus sed sem elementum, congue vehicula mi auctor. Nulla
                tempus, nisi ac tempus scelerisque, lectus lacus laoreet mi, vel mattis
                velit mauris eget neque. Vivamus vulputate eros at dignissim porttitor.
                Suspendisse varius, turpis id lacinia dignissim, ante felis congue odio,
                non tempus sapien metus et ligula. Praesent nunc lectus, tincidunt at
                velit sodales, blandit suscipit quam. Donec libero nulla, luctus eu nisi
                vel, blandit fermentum quam.</p>

                <p>Morbi ultricies aliquet tortor lobortis placerat. Vestibulum
                    scelerisque mollis sagittis. Etiam fermentum sem eget congue congue.
                    Sed non elit facilisis, molestie eros vitae, fringilla quam.
                    Curabitur et egestas mauris. Nulla egestas quam id quam pretium, et
                    interdum metus tincidunt. Nunc quam dui, tristique et viverra quis,
                    consequat eget dui. Nullam ut justo id risus mattis accumsan id a
                    nibh. Praesent feugiat mattis tellus imperdiet mattis. Pellentesque
                    nec nisl vel sapien ultrices tempus. Cum sociis natoque penatibus et
                    magnis dis parturient montes, nascetur ridiculus mus. Pellentesque
                    sagittis ut odio nec bibendum.</p>

                <p>Nam aliquet mi arcu, vitae lacinia massa eleifend sit amet. Sed id
                    fermentum nunc. Aliquam luctus nulla augue, a lobortis risus congue
                    eget. Morbi porta augue at cursus gravida. Maecenas auctor porttitor
                    nibh. Sed elementum nibh ipsum, imperdiet pellentesque nisl aliquam
                    at. Suspendisse molestie enim quis massa sodales, vel lobortis quam
                    convallis. Aliquam pellentesque consequat eros, ornare tincidunt
                    tellus pulvinar in. Vivamus commodo facilisis tincidunt. Nullam
                    ornare fermentum hendrerit. Pellentesque semper velit mi, id iaculis
                    nulla blandit porttitor.</p>

                <p>Aliquam bibendum tempor diam non eleifend. Cras sapien tortor, viverra
                    vitae augue et, mattis dictum ligula. Integer sagittis tincidunt
                    auctor. Nulla facilisi. Curabitur ut ante at nulla euismod luctus
                    quis id nunc. Suspendisse in augue vitae nulla consequat auctor.
                    In aliquet convallis ultrices. Etiam porta adipiscing metus, vel
                    facilisis velit cursus in. Praesent rutrum velit ut erat sodales, id
                    rhoncus sapien suscipit. Phasellus placerat dignissim malesuada.
                    Aliquam vitae auctor velit. Donec vestibulum, ligula ac aliquet
                    varius, lorem tellus posuere tellus, a porta neque orci quis metus.
                    Praesent ultrices metus vitae mi tempus, ac molestie ligula rutrum.
                    Sed vel sem id urna aliquam placerat dapibus vel sem. Cras vel magna
                    nec tellus eleifend malesuada eget sed risus. Sed et nibh sed libero
                    posuere adipiscing sed eu nunc.</p>

                <p>Mauris in venenatis nunc. Aenean vulputate vestibulum tincidunt. Proin
                    porta sodales erat, at sodales leo semper id. Cras faucibus
                    consectetur erat, nec scelerisque nibh sagittis quis. Ut lorem purus,
                    fermentum quis sodales eu, ultricies vitae orci. Ut rhoncus tempor
                    tortor, a rutrum nisi tristique interdum. Duis molestie consequat
                    urna, in volutpat nisl commodo at. Proin in elit venenatis, tempor
                    purus eget, commodo turpis. Donec scelerisque tempus turpis sed
                    egestas. Suspendisse tincidunt sollicitudin sem non vulputate.
                    Maecenas quis varius erat, ultricies ullamcorper velit. Vestibulum
                    feugiat quam lectus, nec malesuada enim iaculis in. Integer pharetra,
                    erat ac vulputate dictum, eros tellus lobortis eros, posuere ultrices
                    sem dolor a felis.</p>
                </div>

                <div class="segundo-bloque" style="-webkit-column-count:3; -moz-column-count:3;
                     margin-top: 20px;">
                    <p><img src="http://placehold.it/100&text=Imagen ficticia"
                        style="float: left; margin: 0 10px 10px 0;">Mauris in venenatis
                        nunc. Aenean vulputate vestibulum tincidunt.
                        Proin porta sodales erat, at sodales leo semper id. Cras faucibus
                        consectetur erat, nec scelerisque nibh sagittis quis. Ut lorem
                        purus, fermentum quis sodales eu, ultricies vitae orci. Ut
                        rhoncus tempor tortor, a rutrum nisi tristique interdum. Duis
                        molestie consequat urna, in volutpat nisl commodo at. Proin in
                        elit venenatis, tempor purus eget, commodo turpis. Donec
                        scelerisque tempus turpis sed egestas. Suspendisse tincidunt
                        sollicitudin sem non vulputate. Maecenas quis varius erat,
                        ultricies ullamcorper velit. Vestibulum feugiat quam lectus,
                        nec malesuada enim iaculis in. Integer pharetra, erat ac
                        vulputate dictum, eros tellus lobortis eros, posuere ultrices
                        sem dolor a felis.

                        Mauris in venenatis nunc. Aenean vulputate vestibulum tincidunt.
                        Proin porta sodales erat, at sodales leo semper id. Cras faucibus
                        consectetur erat, nec scelerisque nibh sagittis quis. Ut lorem
                        purus, fermentum quis sodales eu, ultricies vitae orci. Ut
                        rhoncus tempor tortor, a rutrum nisi tristique interdum. Duis
                        molestie consequat urna, in volutpat nisl commodo at. Proin in
                        elit venenatis, tempor purus eget, commodo turpis. Donec
                        scelerisque tempus turpis sed egestas. Suspendisse tincidunt
                        sollicitudin sem non vulputate. Maecenas quis varius erat,
                        ultricies ullamcorper velit. Vestibulum feugiat quam lectus,
                        nec malesuada enim iaculis in. Integer pharetra, erat ac
                        vulputate dictum, eros tellus lobortis eros, posuere ultrices
                        sem dolor a felis.
                    </p>
                </div>
            </article>

            <footer>
                <p><a rel="license"
                      href="http://creativecommons.org/licenses/by-sa/3.0/deed.es_ES">
                        <img alt="Licencia de Creative Commons"
                             style="border-width:0; float: left; margin: 0 .625em .1875em 0;"
                             src="http://i.creativecommons.org/l/by-sa/3.0/88x31.png" />
                    </a>&copy;2013 - Fernando Magrosoto V.</p>
                <p>Todos (o algunos) Derechos Reservados</p>
                <p><span xmlns:dct="http://purl.org/dc/terms/"
                               href="http://purl.org/dc/dcmitype/Text"
                               property="dct:title"
                               rel="dct:type">
                        Tutorial para elementos en sticky mode</span> by
                        <a xmlns:cc="http://creativecommons.org/ns#"
                           href="http://www.fmagrosoto.com"
                           property="cc:attributionName"
                           rel="cc:attributionURL">
                            Fernando Magrosoto V.</a>
                        is licensed under a
                        <a rel="license"
                           href="http://creativecommons.org/licenses/by-sa/3.0/deed.es_ES">
                            Creative Commons Reconocimiento-CompartirIgual 3.0 Unported
                            License</a>. Creado a partir de la obra en
                        <a xmlns:dct="http://purl.org/dc/terms/"
                           href="http://fmv-pruebas.info/stickyElements/"
                           rel="dct:source">http://fmv-pruebas.info/stickyElements/</a>.
                </p>
            </footer>
        </section>
    </body>
</html>
	<!DOCTYPE html>
	<html lang="es-MX">
	<head>
	<meta charset="UTF-8" />
	<title>Elementos en sticky mode</title>
	<link href='http://fonts.googleapis.com/css?family=Raleway:400,200'
	rel='stylesheet' type='text/css'>
	<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
	<style>

	body {
	font-family: 'Raleway', sans-serif;
	font-size: 100%;
	color: rgb(51,51,51);
	background: whitesmoke;
	}
	section {
	position: relative;
	width: 62.5em; /* 1000 / 16 */
	padding: .625em;
	margin: auto;
	background: pink;
	}

	section nav {
	position: relative;
	background: black;
	color: white;
	padding: 1.25em;
	width: 43.75em;
	margin: auto;
	text-align: center;
	overflow: auto;
	}

	section nav ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	display: inline-block;
	}

	section nav ul li {
	float: left;
	margin-right: 25px;
	}

	section nav ul li:last-child {
	margin-right: 0;
	}

	section nav ul li a {
	color: white;
	text-decoration: none;
	}

	section nav ul li a:hover {
	color: yellow;
	}


	section header {
	background: gray;
	color: whitesmoke;
	padding: 1.25em;
	}

	section article {
	position: relative;
	padding: 1.25em;
	padding-right: 3.5em;
	padding-left: 3.5em;
	}

	section article p {
	text-align: justify;
	margin-top: 0;
	}

	section article #menu-seguidor {
	position: absolute;
	width: 120px;
	background: green;
	padding: .625em;
	top: 100px;
	right: -100px;
	font-size: .875em;
	}
	section article #menu-seguidor:after {
	content: "";
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 0 75px 25px 0;
	border-color: transparent #666600 transparent transparent;
	position: absolute;
	bottom: -25px;
	left: 0;
	}

	section article #menu-seguidor:before {
	content: "";
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 10px 0 10px 28px;
	border-color: transparent transparent transparent #000000;
	position: absolute;
	bottom: -35px;
	left: 47px;
	}

	section article #menu-pegajoso {
	position: absolute;
	padding: .625em;
	top: 200px;
	left: -120px;
	font-size: .875em;
	}

	section article #menu-pegajoso ul {
	position: static;
	width: 120px;
	background: red;
	z-index: 200;
	}

	footer {
	font-size: .875em; /* 14 / 16 */
	font-weight: 200;
	width: 56.25em; /900 / 16 /
	margin: auto;
	}
	footer p{
	margin: 0;
	padding: 0;
	}
	#navegacion-flotante {
	position: fixed;
	top: -75px;
	background: black;
	padding: .9375em;
	z-index: 100;
	text-align: center;
	}

	#navegacion-flotante ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	display: inline-block;
	}

	#navegacion-flotante ul li {
	float: left;
	margin-right: 25px;
	}

	#navegacion-flotante ul li:last-child {
	margin-right: 0;
	}

	#navegacion-flotante ul li a {
	color: white;
	text-decoration: none;
	}

	#navegacion-flotante ul li a:hover {
	color: yellow;
	}
	</style>

	<script>
	$(document).ready(function(){
	var navFija = $('#navegacion-fija').offset().top; // posición actual del elemento
	var menuSeg = $('#menu-seguidor').offset().top; // posición actual del elemento
	var menuPeg = $('#menu-pegajoso').offset().top; // posición actual del elemento

	// Tamaño del div en FIXED
	// para evitar que aparezcan las barras de navegación
	// horizontal y vertila al poner el width en 100%
	$("#navegacion-flotante").css({
	width: $(window).width()
	});

	// funciones para que la magia suceda
	$(window).scroll(function(){

	// para la barra de navegción con fondo negro
	if($(window).scrollTop() < navFija){
	$('#navegacion-flotante').stop().animate({
	top: -75
	},'fast');
	} else {
	$('#navegacion-flotante').stop().animate({
	top: 0
	},'fast');
	}


	// Para menú con fondo verde
	if ($(window).scrollTop() > menuSeg) {
	$('#menu-seguidor').stop().animate({
	marginTop: $(window).scrollTop() - menuSeg + 200
	});
	} else {
	$('#menu-seguidor').stop().animate({
	marginTop: 0
	});
	}


	// Para menú con fondo rojo
	if ($(window).scrollTop() > menuPeg){
	$('#menu-pegajoso ul').css({ position: 'fixed', top: 0 });
	} else {
	$('#menu-pegajoso ul').css('position','static');
	}

	});

	});
	</script>
	</head>
	<body>

	<div id="navegacion-flotante">
	<ul>
	<li><a href="javascript:void(0);">Link 01</a></li>
	<li><a href="javascript:void(0);">Link 02</a></li>
	<li><a href="javascript:void(0);">Link 03</a></li>
	<li><a href="javascript:void(0);">Link 04</a></li>
	<li><a href="javascript:void(0);">Link 05</a></li>
	</ul>
	</div>

	<section>

	<header>
	<h1>Elementos en <em>sticky mode</em></h1>
	<p><em>Tutorial para crear elementos que sigan el flujo natural del
	scroll bar pero que, al llegar a un momento específico, se queden
	"pegados" en la página para que no se pierdan de vista dentro del
	viewport o pantalla activa.</em></p>
	<p>Haremos varias versiones de éste técnica que tendrán efectos
	diferentes pero visualmente enriquecedoras, las cuales, sin duda,
	fortalecerán la experiencia del usuario.</p>
	</header>

	<nav id="navegacion-fija">
	<ul>
	<li><a href="javascript:void(0);">Link 01</a></li>
	<li><a href="javascript:void(0);">Link 02</a></li>
	<li><a href="javascript:void(0);">Link 03</a></li>
	<li><a href="javascript:void(0);">Link 04</a></li>
	<li><a href="javascript:void(0);">Link 05</a></li>
	</ul>
	</nav>

	<article>

	<div id="menu-pegajoso">
	<ul>
	<li><a href="javascript:void(0);">Link 01</a></li>
	<li><a href="javascript:void(0);">Link 02</a></li>
	<li><a href="javascript:void(0);">Link 03</a></li>
	<li><a href="javascript:void(0);">Link 04</a></li>
	<li><a href="javascript:void(0);">Link 05</a></li>
	</ul>
	</div>

	<div id="menu-seguidor">
	<ul>
	<li><a href="javascript:void(0);">Link 01</a></li>
	<li><a href="javascript:void(0);">Link 02</a></li>
	<li><a href="javascript:void(0);">Link 03</a></li>
	<li><a href="javascript:void(0);">Link 04</a></li>
	<li><a href="javascript:void(0);">Link 05</a></li>
	</ul>
	</div>

	<div class="primer-bloque">
	<p><img src="http://placehold.it/200&text=Imagen ficticia"
	style="float: left; margin: 0 20px 20px 0;">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu
	viverra augue. Cras interdum sem ut sapien feugiat ultricies. Fusce quis
	fermentum augue. Nunc rhoncus, est nec dignissim consectetur, purus neque
	tempus mauris, non gravida sapien tellus non est. Vestibulum a aliquet
	justo. Maecenas urna enim, bibendum at porta ac, congue id urna. Nullam
	consectetur urna urna, nec dapibus purus facilisis ac. Pellentesque
	habitant morbi tristique senectus et netus et malesuada fames ac turpis
	egestas. Maecenas vel mollis ipsum. Sed ac dapibus velit, id gravida nibh.
	Nulla mattis lectus sed sem elementum, congue vehicula mi auctor. Nulla
	tempus, nisi ac tempus scelerisque, lectus lacus laoreet mi, vel mattis
	velit mauris eget neque. Vivamus vulputate eros at dignissim porttitor.
	Suspendisse varius, turpis id lacinia dignissim, ante felis congue odio,
	non tempus sapien metus et ligula. Praesent nunc lectus, tincidunt at
	velit sodales, blandit suscipit quam. Donec libero nulla, luctus eu nisi
	vel, blandit fermentum quam.</p>

	<p>Morbi ultricies aliquet tortor lobortis placerat. Vestibulum
	scelerisque mollis sagittis. Etiam fermentum sem eget congue congue.
	Sed non elit facilisis, molestie eros vitae, fringilla quam.
	Curabitur et egestas mauris. Nulla egestas quam id quam pretium, et
	interdum metus tincidunt. Nunc quam dui, tristique et viverra quis,
	consequat eget dui. Nullam ut justo id risus mattis accumsan id a
	nibh. Praesent feugiat mattis tellus imperdiet mattis. Pellentesque
	nec nisl vel sapien ultrices tempus. Cum sociis natoque penatibus et
	magnis dis parturient montes, nascetur ridiculus mus. Pellentesque
	sagittis ut odio nec bibendum.</p>

	<p>Nam aliquet mi arcu, vitae lacinia massa eleifend sit amet. Sed id
	fermentum nunc. Aliquam luctus nulla augue, a lobortis risus congue
	eget. Morbi porta augue at cursus gravida. Maecenas auctor porttitor
	nibh. Sed elementum nibh ipsum, imperdiet pellentesque nisl aliquam
	at. Suspendisse molestie enim quis massa sodales, vel lobortis quam
	convallis. Aliquam pellentesque consequat eros, ornare tincidunt
	tellus pulvinar in. Vivamus commodo facilisis tincidunt. Nullam
	ornare fermentum hendrerit. Pellentesque semper velit mi, id iaculis
	nulla blandit porttitor.</p>

	<p>Aliquam bibendum tempor diam non eleifend. Cras sapien tortor, viverra
	vitae augue et, mattis dictum ligula. Integer sagittis tincidunt
	auctor. Nulla facilisi. Curabitur ut ante at nulla euismod luctus
	quis id nunc. Suspendisse in augue vitae nulla consequat auctor.
	In aliquet convallis ultrices. Etiam porta adipiscing metus, vel
	facilisis velit cursus in. Praesent rutrum velit ut erat sodales, id
	rhoncus sapien suscipit. Phasellus placerat dignissim malesuada.
	Aliquam vitae auctor velit. Donec vestibulum, ligula ac aliquet
	varius, lorem tellus posuere tellus, a porta neque orci quis metus.
	Praesent ultrices metus vitae mi tempus, ac molestie ligula rutrum.
	Sed vel sem id urna aliquam placerat dapibus vel sem. Cras vel magna
	nec tellus eleifend malesuada eget sed risus. Sed et nibh sed libero
	posuere adipiscing sed eu nunc.</p>

	<p>Mauris in venenatis nunc. Aenean vulputate vestibulum tincidunt. Proin
	porta sodales erat, at sodales leo semper id. Cras faucibus
	consectetur erat, nec scelerisque nibh sagittis quis. Ut lorem purus,
	fermentum quis sodales eu, ultricies vitae orci. Ut rhoncus tempor
	tortor, a rutrum nisi tristique interdum. Duis molestie consequat
	urna, in volutpat nisl commodo at. Proin in elit venenatis, tempor
	purus eget, commodo turpis. Donec scelerisque tempus turpis sed
	egestas. Suspendisse tincidunt sollicitudin sem non vulputate.
	Maecenas quis varius erat, ultricies ullamcorper velit. Vestibulum
	feugiat quam lectus, nec malesuada enim iaculis in. Integer pharetra,
	erat ac vulputate dictum, eros tellus lobortis eros, posuere ultrices
	sem dolor a felis.</p>
	</div>

	<div class="segundo-bloque" style="-webkit-column-count:3; -moz-column-count:3;
	margin-top: 20px;">
	<p><img src="http://placehold.it/100&text=Imagen ficticia"
	style="float: left; margin: 0 10px 10px 0;">Mauris in venenatis
	nunc. Aenean vulputate vestibulum tincidunt.
	Proin porta sodales erat, at sodales leo semper id. Cras faucibus
	consectetur erat, nec scelerisque nibh sagittis quis. Ut lorem
	purus, fermentum quis sodales eu, ultricies vitae orci. Ut
	rhoncus tempor tortor, a rutrum nisi tristique interdum. Duis
	molestie consequat urna, in volutpat nisl commodo at. Proin in
	elit venenatis, tempor purus eget, commodo turpis. Donec
	scelerisque tempus turpis sed egestas. Suspendisse tincidunt
	sollicitudin sem non vulputate. Maecenas quis varius erat,
	ultricies ullamcorper velit. Vestibulum feugiat quam lectus,
	nec malesuada enim iaculis in. Integer pharetra, erat ac
	vulputate dictum, eros tellus lobortis eros, posuere ultrices
	sem dolor a felis.

	Mauris in venenatis nunc. Aenean vulputate vestibulum tincidunt.
	Proin porta sodales erat, at sodales leo semper id. Cras faucibus
	consectetur erat, nec scelerisque nibh sagittis quis. Ut lorem
	purus, fermentum quis sodales eu, ultricies vitae orci. Ut
	rhoncus tempor tortor, a rutrum nisi tristique interdum. Duis
	molestie consequat urna, in volutpat nisl commodo at. Proin in
	elit venenatis, tempor purus eget, commodo turpis. Donec
	scelerisque tempus turpis sed egestas. Suspendisse tincidunt
	sollicitudin sem non vulputate. Maecenas quis varius erat,
	ultricies ullamcorper velit. Vestibulum feugiat quam lectus,
	nec malesuada enim iaculis in. Integer pharetra, erat ac
	vulputate dictum, eros tellus lobortis eros, posuere ultrices
	sem dolor a felis.
	</p>
	</div>
	<div class="primer-bloque" style="margin-top: 20px;">
	<p><img src="http://placehold.it/200&text=Imagen ficticia"
	style="float: left; margin: 0 20px 20px 0;">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu
	viverra augue. Cras interdum sem ut sapien feugiat ultricies. Fusce quis
	fermentum augue. Nunc rhoncus, est nec dignissim consectetur, purus neque
	tempus mauris, non gravida sapien tellus non est. Vestibulum a aliquet
	justo. Maecenas urna enim, bibendum at porta ac, congue id urna. Nullam
	consectetur urna urna, nec dapibus purus facilisis ac. Pellentesque
	habitant morbi tristique senectus et netus et malesuada fames ac turpis
	egestas. Maecenas vel mollis ipsum. Sed ac dapibus velit, id gravida nibh.
	Nulla mattis lectus sed sem elementum, congue vehicula mi auctor. Nulla
	tempus, nisi ac tempus scelerisque, lectus lacus laoreet mi, vel mattis
	velit mauris eget neque. Vivamus vulputate eros at dignissim porttitor.
	Suspendisse varius, turpis id lacinia dignissim, ante felis congue odio,
	non tempus sapien metus et ligula. Praesent nunc lectus, tincidunt at
	velit sodales, blandit suscipit quam. Donec libero nulla, luctus eu nisi
	vel, blandit fermentum quam.</p>

	<p>Morbi ultricies aliquet tortor lobortis placerat. Vestibulum
	scelerisque mollis sagittis. Etiam fermentum sem eget congue congue.
	Sed non elit facilisis, molestie eros vitae, fringilla quam.
	Curabitur et egestas mauris. Nulla egestas quam id quam pretium, et
	interdum metus tincidunt. Nunc quam dui, tristique et viverra quis,
	consequat eget dui. Nullam ut justo id risus mattis accumsan id a
	nibh. Praesent feugiat mattis tellus imperdiet mattis. Pellentesque
	nec nisl vel sapien ultrices tempus. Cum sociis natoque penatibus et
	magnis dis parturient montes, nascetur ridiculus mus. Pellentesque
	sagittis ut odio nec bibendum.</p>

	<p>Nam aliquet mi arcu, vitae lacinia massa eleifend sit amet. Sed id
	fermentum nunc. Aliquam luctus nulla augue, a lobortis risus congue
	eget. Morbi porta augue at cursus gravida. Maecenas auctor porttitor
	nibh. Sed elementum nibh ipsum, imperdiet pellentesque nisl aliquam
	at. Suspendisse molestie enim quis massa sodales, vel lobortis quam
	convallis. Aliquam pellentesque consequat eros, ornare tincidunt
	tellus pulvinar in. Vivamus commodo facilisis tincidunt. Nullam
	ornare fermentum hendrerit. Pellentesque semper velit mi, id iaculis
	nulla blandit porttitor.</p>

	<p>Aliquam bibendum tempor diam non eleifend. Cras sapien tortor, viverra
	vitae augue et, mattis dictum ligula. Integer sagittis tincidunt
	auctor. Nulla facilisi. Curabitur ut ante at nulla euismod luctus
	quis id nunc. Suspendisse in augue vitae nulla consequat auctor.
	In aliquet convallis ultrices. Etiam porta adipiscing metus, vel
	facilisis velit cursus in. Praesent rutrum velit ut erat sodales, id
	rhoncus sapien suscipit. Phasellus placerat dignissim malesuada.
	Aliquam vitae auctor velit. Donec vestibulum, ligula ac aliquet
	varius, lorem tellus posuere tellus, a porta neque orci quis metus.
	Praesent ultrices metus vitae mi tempus, ac molestie ligula rutrum.
	Sed vel sem id urna aliquam placerat dapibus vel sem. Cras vel magna
	nec tellus eleifend malesuada eget sed risus. Sed et nibh sed libero
	posuere adipiscing sed eu nunc.</p>

	<p>Mauris in venenatis nunc. Aenean vulputate vestibulum tincidunt. Proin
	porta sodales erat, at sodales leo semper id. Cras faucibus
	consectetur erat, nec scelerisque nibh sagittis quis. Ut lorem purus,
	fermentum quis sodales eu, ultricies vitae orci. Ut rhoncus tempor
	tortor, a rutrum nisi tristique interdum. Duis molestie consequat
	urna, in volutpat nisl commodo at. Proin in elit venenatis, tempor
	purus eget, commodo turpis. Donec scelerisque tempus turpis sed
	egestas. Suspendisse tincidunt sollicitudin sem non vulputate.
	Maecenas quis varius erat, ultricies ullamcorper velit. Vestibulum
	feugiat quam lectus, nec malesuada enim iaculis in. Integer pharetra,
	erat ac vulputate dictum, eros tellus lobortis eros, posuere ultrices
	sem dolor a felis.</p>
	</div>

	<div class="segundo-bloque" style="-webkit-column-count:3; -moz-column-count:3;
	margin-top: 20px;">
	<p><img src="http://placehold.it/100&text=Imagen ficticia"
	style="float: left; margin: 0 10px 10px 0;">Mauris in venenatis
	nunc. Aenean vulputate vestibulum tincidunt.
	Proin porta sodales erat, at sodales leo semper id. Cras faucibus
	consectetur erat, nec scelerisque nibh sagittis quis. Ut lorem
	purus, fermentum quis sodales eu, ultricies vitae orci. Ut
	rhoncus tempor tortor, a rutrum nisi tristique interdum. Duis
	molestie consequat urna, in volutpat nisl commodo at. Proin in
	elit venenatis, tempor purus eget, commodo turpis. Donec
	scelerisque tempus turpis sed egestas. Suspendisse tincidunt
	sollicitudin sem non vulputate. Maecenas quis varius erat,
	ultricies ullamcorper velit. Vestibulum feugiat quam lectus,
	nec malesuada enim iaculis in. Integer pharetra, erat ac
	vulputate dictum, eros tellus lobortis eros, posuere ultrices
	sem dolor a felis.

	Mauris in venenatis nunc. Aenean vulputate vestibulum tincidunt.
	Proin porta sodales erat, at sodales leo semper id. Cras faucibus
	consectetur erat, nec scelerisque nibh sagittis quis. Ut lorem
	purus, fermentum quis sodales eu, ultricies vitae orci. Ut
	rhoncus tempor tortor, a rutrum nisi tristique interdum. Duis
	molestie consequat urna, in volutpat nisl commodo at. Proin in
	elit venenatis, tempor purus eget, commodo turpis. Donec
	scelerisque tempus turpis sed egestas. Suspendisse tincidunt
	sollicitudin sem non vulputate. Maecenas quis varius erat,
	ultricies ullamcorper velit. Vestibulum feugiat quam lectus,
	nec malesuada enim iaculis in. Integer pharetra, erat ac
	vulputate dictum, eros tellus lobortis eros, posuere ultrices
	sem dolor a felis.
	</p>
	</div>
	</article>

	<footer>
	<p><a rel="license"
	href="http://creativecommons.org/licenses/by-sa/3.0/deed.es_ES">
	<img alt="Licencia de Creative Commons"
	style="border-width:0; float: left; margin: 0 .625em .1875em 0;"
	src="http://i.creativecommons.org/l/by-sa/3.0/88x31.png" />
	</a>©2013 - Fernando Magrosoto V.</p>
	<p>Todos (o algunos) Derechos Reservados</p>
	<p><span xmlns:dct="http://purl.org/dc/terms/"
	href="http://purl.org/dc/dcmitype/Text"
	property="dct:title"
	rel="dct:type">
	Tutorial para elementos en sticky mode</span> by
	<a xmlns:cc="http://creativecommons.org/ns#"
	href="http://www.fmagrosoto.com"
	property="cc:attributionName"
	rel="cc:attributionURL">
	Fernando Magrosoto V.</a>
	is licensed under a
	<a rel="license"
	href="http://creativecommons.org/licenses/by-sa/3.0/deed.es_ES">
	Creative Commons Reconocimiento-CompartirIgual 3.0 Unported
	License</a>. Creado a partir de la obra en
	<a xmlns:dct="http://purl.org/dc/terms/"
	href="http://fmv-pruebas.info/stickyElements/"
	rel="dct:source">http://fmv-pruebas.info/stickyElements/</a>.
	</p>
	</footer>
	</section>
	</body>
	</html>