Recursos y Descargas

Esto no es un blog. Es una sección que programé para ir publicando aquellas cositas que me parecen interesantes y, por cualquier motivo, quiero tener a mano. Copia lo que quieras, usa lo que quieras (pero respeta sus licencias).

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

Escrito por: Martín el 01-12-2009 08:35:24

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

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.

Bookmark and Share

Código JAVASCRIPT

$(function() {
            var offset = $("#sidebar").offset();
            var topPadding = 15;
            $(window).scroll(function() {
                if ($(window).scrollTop() > offset.top) {
                    $("#sidebar").stop().animate({
                        marginTop: $(window).scrollTop() - offset.top + topPadding
                    });
                } else {
                    $("#sidebar").stop().animate({
                        marginTop: 0
                    });
                };
            });
        });

Código XHTML

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

Código CSS

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

 

 

Otros recursos:

Yo digo

Ver todos los Comentarios

¿Sabías qué?

Ver todos los Recursos

facebookBúscame en Facebook

twitterSígueme en Twitter

© 2010 Martin Iglesias - Todos los derechos reservados

Creative Commons License Mejor con Firefox 3 Valid XHTML 1.0 Transitional ¡CSS Válido! Suscribete a mi RSS Directorio de Desarrollo de páginas web Add to Technorati Favorites