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

Artículo escrito por Diseño Web Coruña Martín Iglesias

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

01 de Diciembre de 2009 68,226 veces Ver comentarios

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

Ver DEMO

ADVERTENCIA: Este artículo tiene más de 6 meses de antigüedad. Puede que esta información ya se encuentre obsoleta o haya nuevas y mejores opciones.

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 TAMANO 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:

Martín Iglesias, diseño web freelance de A Coruña, especializado en maquetación css y desarrollo de páginas web a medida con más de 18 años de experiencia en el desarrollo de páginas web profesionales. Si te ha gustado este artículo, por favor, ayúdanos a difundirlo compartiéndolo con tus amigos y contactos en las distintas redes sociales que utilices. ¡Muchas gracias!