¿Cómo crear una barra lateral fija/adhesiva en CSS/JS?

Question

Estoy intentando crear un sitio web con el área de contenido principal y una barra lateral, algo así como en Stack Overflow. El objetivo es que cuando te desplaces hacia abajo, la barra lateral permanezca visible.

he visto dos enfoques para esto:

1. position:fixed;
2. manipulación de JavaScript con el Enfoque DOM

no. 1, hasta donde sé, tendrá un problema cuando la ventana gráfica sea más pequeña que el contenido de la barra lateral, así que supongo que no se puede usar de manera confiable y las secuencias de comandos de JavaScript que he visto suelen ser animadas o generalmente "lentas" (puede ver que hay un nuevo trazado después de cada desplazamiento).

Puede alguien señalar una estrategia de biblioteca/CSS javscript que no sufren los problemas antes mencionados?

Editar: un ejemplo sería this pagepero con la barra lateral se pegue a la parte superior sin una animación y manejar correctamente la situación cuando la barra lateral es mayor que el contenido/ventana gráfica.

Answer 1

Se puede coger la altura de la ventana del cliente y dándole a la barra lateral de esta manera:

var sidebarHeight = $(window).innerHeight(); 

$('#sidebar')​​​​​​​​​​​.css('height',sidebarHeight);​​​​​​​​​​​​​ 

Con el CSS adecuado para la barra lateral:

#sidebar { 
    position: fixed; 
    right: 0; 
    top: 0; 
    width: 200px; 
    overflow: hidden; 
} 

Here is a working JSFiddle.

También puede ver para cambiar el tamaño de la ventana para evitar un lío en el cambio de tamaño :) Here is the way to go with jQuery

Buena suerte

Answer 2

Código y de demostración aquí: http://closure-library.googlecode.com/svn/docs/class_goog_ui_ScrollFloater.html

Answer 3

No me gustan las soluciones JS pesados, por lo que es importante preguntar - Compatibilidad preferido. En IE8 + es posible en lugar de

var $window = $(window), 
    $sidebar = $(sidebar); 

$window.on('resize', function(){ 
    $sidebar.height($window.innerHeight()); 
}); 

$window.resize(); 

hacer algo como esto (solución puro CSS):

#sidebar { 
    position: fixed; 
    left: 0; /* or right */ 
    top: 0; 
    bottom: 0; 
    overflow: auto; 
} 

Cuando se tiene la parte superior & abajo/izquierda & valor correcto, al mismo tiempo, la caja será estirado. (JSFiddle demo)

Answer 4

que tenemos. Está basado en Javascript, pero estoy seguro de que no es nada pesado e incluso IE8 debería resolverlo bastante bien.

var top = $('#sidebar').offset().top; 
var height = $('#sidebar').height(); 
var winHeight = $(window).height(); 
var gap = 10; 
$(window).scroll(function(event) { 
    var scrollTop = $(this).scrollTop(); 

    // sidebar reached the (end - viewport height) 
    if (scrollTop + winHeight >= top + height + gap) { 
     // if so, fix the sidebar and make sure that offset().top will not give us results which would cancel the fixation 
     $('#sidebar').addClass('fixed').css('top', winHeight - height - gap + 'px'); 
    } else { 
     // otherwise remove it 
     $('#sidebar').removeClass('fixed').css('top', '0px'); 
    } 
});​ 

demo

Answer 5

No estoy seguro si usted tiene esta resuelto pero he creado un contenido pegajosa barra lateral jQuery plugin. Es realmente simple y le permite invocar con solo una línea de jQuery.Eche un vistazo aquí: http://mojotech.github.com/stickymojo/

Comienza por posición: fijo; luego usa javascript para manejar cualquier tamaño, desplazamiento e incluso le permite especificar un elemento de pie de página que no debe cruzarse. Al combinar estos enfoques obtendrá un elemento fijo de aspecto suave. Además, te lo hicimos fácil.