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

Escrito por: Martín el 01-12-2009 08:35:24 y leído 20581 veces

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 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 XHTML

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

Código CSS

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

Categorías: Menú Lateral • Jquery • Javascript • Css • •

Artículos relacionados:

• 20 plugins para jQuery que no pueden faltar en tus webs
• Excelente listado de 240 plugins para jquery
• jQuery Validate: la rápida validación de formularios.
• Formularios web con jQuery Validate y envío por phpmailer y gmail
• Calendario en PHP con eventos, jQuery y vTip
• 18 plugins jquery que no pueden faltar en tu web parte 2
• Uso de jScrollPane para jQuery. Elegante scroll en tus div

100 Búsquedas de este artículo:

sidebar jquery • menu lateral jquery • jquery sidebar • div siempre visible • barra lateral jquery • panel lateral jquery • jquery barra lateral • pestaña lateral jquery • menu siempre visible JQUERY • div siempre visible scroll • menu siempre visible • jquery menu lateral • barra de menu jquery • jquery panel lateral • sidebar menu jquery • jquery menus muy visitado • menus laterales jquery • barra menu jquery • jquery lateral menu • jquery sidebar menu • scroll sidebar • menu siempre visible html • lateral menu jquery • sidebar con jquery • div siempre visible jquery • jquery div siempre visible • jquery pestaña lateral que sigue la pantalla • panel lateral desplegable jquery • menu lateral con jquery • div siempre visible css • jquery siempre visible • panel lateral con jquery • barra lateral html • barra de scroll jquery • jquery pestaña lateral • barra lateral con jquery • sidebar scroll • div siempre encima • jquery barra menu • barra de menu con submenus jquery • barra de menu con jquery • menu jquery lateral • capa siempre visible css • en mi web Texto Desplazable Automático (Scroll) • menú o barra lateral (sidebar) siempre visible con scroll y jquery • scroll siempre visible • menu scroll jquery • barra lateral css • barra fija jquery • css div siempre visible • menu lateral en jquery • css siempre visible • mantener un div fijo • boton siempre visible scroll pagina • div estatico jquery • div estaticos y movimiento • mover scroll jquery • slide bar jquery • jquery lateral • jquery menu scroll • texto con scroll jquery • barra lateral siempre visible • DIV que siga el scroll jquery • barra siempre visible css • sidebar flotante wordpress • css barra lateral • poner div fijo con jquery • div con scrollbar vertical para mobile • div estatico con jquery • barras scroll jquery • cabecera siempre visible javascript • mantener elemento fijo en scroll html • menu barra lateral • barra lateral javascript • side bar jquery • menu lateral siempre visible • menú lateral jquery • mantener div siempre visible • menu con movimiento jquery • jquery menu siempre visible • imagen siempre visible css • div desplegable jquery • barra de estado con jquery • menu sidebar jquery • jquery scroll automatico • jquery menu android • capa siempre visible • Cabecera siempre visible con jquery • mostrar div lateral con Jquery • jquery header siempre visible • como hacer barras de menus laterales con jquery • jquery div lateral • Barra lateral flotante jquery • sidebar jquery menu • jquery barra siempre visible • css siempre encima • jquery visible • jquery capa siempre visible • jquery scroll elegante • siempre visible jquery •