Menú o barra lateral (sidebar) siempre visible con scroll y jQuery Blog de Martin Iglesias

Menú o barra lateral (sidebar) siempre visible con scroll y jQuery

Escrito por Martín Iglesias y leído 38,812 veces. Ver comentarios

01DICIEMBRE/2009

Encontré el otro día en CSS-TRICKS un excelente ejemplo de como hacer que una barra lateral o menú o submenú (o lo que quieras) acompañe siempre con movimiento vertical al contenido central de la web.

Realmente es muy útil, por ejemplo, para grandes cantidades de texto en las que quieres mostrar unos enlaces internos a determinadas partes de ese texto o subsecciones o lo que quieras.

Es más difícil de explicar que de hacer y ver, por lo que me apropié de la demo de CSS TRICKS y la pasé a español dejando solo la opción que me interesa que es la de la barra lateral acompañe al texto central.

Su uso:
Es muy simple, luego de agregar la librería jQuery a tu web, debes indicarle que capa de tu html será la que se mueva acorde al scroll que hagas en tu web (ver código 1) y en tu html, indicar el div que hará de barra lateral (ver código 2) y un poco de CSS para adornar tu barra lateral.

¿Quieres el original? Lo suponía, así que ahi te va el enlace original y mi demo.

Código 1 - JAVASCRIPT

$(function() {
            var offset = $("#sidebar").offset();
            var topPadding = 15;
            $(window).scroll(function() {
                if ($("#sidebar").height() < $(window).height() && $(window).scrollTop() > offset.top) { /* LINEA MODIFICADA POR ALEX PARA NO ANIMAR SI EL SIDEBAR ES MAYOR AL TAMAÑO DE PANTALLA */
                    $("#sidebar").stop().animate({
                        marginTop: $(window).scrollTop() - offset.top + topPadding
                    });
                } else {
                    $("#sidebar").stop().animate({
                        marginTop: 0
                    });
                };
            });
        });

Código 2 - HTML

<div id="sidebar">
     Aquí el contenido que quedará siempre visible!
</div>

Código 3 - CSS

#sidebar { width: 190px; float: right;background:#ccc;padding:20px }

Acerca del Autor:

Diseñador web freelance en Coruña Galicia | Martin Iglesias

Martín Iglesias, diseñador web freelance de A Coruña, especializado en maquetación css y desarrollo de páginas web a medida con más de 15 años de experiencia en el desarrollo de páginas web profesionales.

Si te ha gustado este artículo, por favor, ayúdame a difundirlo compartiéndolo con tus amigos y contactos en las distintas redes sociales que utilices. ¡Muchas gracias!

Menú o barra lateral (sidebar) siempre visible con scroll y jQuery

Acerca del Autor:

Artículos relacionados: