Menú de navegación que se mantiene en la parte superior con jQuery

menu1

Este buen artículo llega gracias a backslash.gr, se trata de un menú de navegación que se adhiere a la parte superior de la ventana mientras se desplaza por la página. Esta es una excelente solución para páginas que tienen mucho contenido, que se extienden mucho y que al usuario le puede parecer incomodo volver a subir para cambiar a otra opción en el menú. Con algo de creatividad, un poco de buen diseño podrias tener un efecto muy cool en tu sitio web.

La idea es  que el menú se quede estático en la parte superior de la página sólo después de que nos hemos desplazado más abajo de su posición original. Solo unas pocas líneas de la voluntad de jQuery para el truco y listo. Aquí el tutorial gracias a backslash.gr.

HTML

<div id="demo_top_wrapper">
 
    <!-- a header with a logo just to have some content before the menu -->
    <div id="demo_top">
        <div class="demo_container">
            <div id="my_logo">Our logo</div>
        </div>
    </div>
 
    <!-- this will be our navigation menu -->
    <div id="sticky_navigation_wrapper">
        <div id="sticky_navigation">
            <div class="demo_container">
                <ul>
                    <li><a href="#" class="selected">HOME</a></li>
                    <li><a href="#">ABOUT US</a></li>
                    <li><a href="#">SERVICES</a></li>
                    <li><a href="#">CLIENTS</a></li>
                    <li><a href="#">PARTNERS</a></li>
                    <li><a href="#">CONTACT</a></li>
                </ul>
            </div>
        </div>
    </div>
 
</div><!-- #demo_top_wrapper -->
 
<!-- some other content should go here, in order to have a scrollbar -->

CSS

.demo_container { width:980px; margin:0 auto; }
#demo_top_wrapper { margin:0 0 20px 0; }
#demo_top { height:100px; padding:20px 0 0 0; }
#my_logo { font:70px Georgia, serif; }
 
/* our menu styles */
#sticky_navigation_wrapper { width:100%; height:50px; }
#sticky_navigation { width:100%; height:50px; background:url(trans-black-60.png); -moz-box-shadow: 0 0 5px #999; -webkit-box-shadow: 0 0 5px #999; box-shadow: 0 0 5px #999; }
#sticky_navigation ul { list-style:none; margin:0; padding:5px; }
#sticky_navigation ul li { margin:0; padding:0; display:inline; }
#sticky_navigation ul li a { display:block; float:left; margin:0 0 0 5px; padding:0 20px; height:40px; line-height:40px; font-size:14px; font-family:Arial, serif; font-weight:bold; color:#ddd; background:#333; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; }

JQeury

$(function() {
 
    // grab the initial top offset of the navigation
    var sticky_navigation_offset_top = $('#sticky_navigation').offset().top;
 
    // our function that decides weather the navigation bar should have "fixed" css position or not.
    var sticky_navigation = function(){
        var scroll_top = $(window).scrollTop(); // our current vertical position from the top
 
        // if we've scrolled more than the navigation, change its position to fixed to stick to top,
        // otherwise change it back to relative
        if (scroll_top &gt; sticky_navigation_offset_top) {
            $('#sticky_navigation').css({ 'position': 'fixed', 'top':0, 'left':0 });
        } else {
            $('#sticky_navigation').css({ 'position': 'relative' });
        }
    };
 
    // run our function on load
    sticky_navigation();
 
    // and run it again every time you scroll
    $(window).scroll(function() {
         sticky_navigation();
    });
 
});

Demo: Demo
Descarga: Descarga

Artículos que también te interesarán

6 comentarios en “Menú de navegación que se mantiene en la parte superior con jQuery

  1. hola acabo de enterarme de tu pagina web y la verdad es que me parece genial no sabia de mas personas interesadas en estos temas, aqui tienes un nuevo lector que seguira visitandote quincenalmente.

    • Jorge Lessin

      Execelente gracias… siempre habrá novedades, visitenos seguido

    • Zigzag, нет, согласиться не могу, потому что не вижу потребности в этих переменных. Если мне нужны переменные, я воспользуюсь jascvaript. Если css полностью допшут до уровня jascvaript, то я с удовольствием буду использовать его. Но тогда, мне кажется, браузеры начнут добавлять в настройках галочки отключения css по-умолчанию, а не как dev-панель. Почему, например, используют css-rollover, а не js? Правильно — потому, что не тормозит и потому, что работает при отключенном js. Что случится с css если его нагрузить программисткими фишками. На мой взгляд, визуальное представление должно быть описано на уровне инструкций. Динамика — дело программирования.

  2. I truly find this a interesting subject. Never looked at this subject in this manner. If you are planning to create more articles relating to this subject, I definitely will be back in the near future!

    • admin

      Thank you very much, we will continue with more articles like this … back soon

    • That saves me. Thanks for being so snesible!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> 

Close