Div desplazándose con la página en una posición fija

Question

Incluso con Firebug no puedo imaginar cómo lograr esto:

vistazo a la div sociales en el lado izquierdo de la página. Te sigue sin problemas: ¿qué posición css utilizaron? Acabo de leer una posición absoluta, nada más.

1. he intentado lo mismo, pero no lo puedo desplazarse en mi página
2. usando jQuery y animado hace que sea demasiado bonita
3. modyfing el css en cada desplazamiento se ve bastante raro, lo metió por un milisegundo y luego pasar ¿Cómo obtener su mismo efecto?

http://techcrunch.com/2011/08/04/sources-livingsocial-close-to-acquiring-turkish-daily-deals-site-grupfoni/

Answer 1

Hay dos estilos relevantes para este efecto:

.post-share-widget.floating { 
    position: fixed; 
    top: 68px; 
} 
.post-share-widget.pinnedTop { 
    bottom: auto; 
    position: absolute; 
} 

Ellos usan un controlador de desplazamiento javascript para establecer el className en el contenedor del widget a cualquiera "flotante" o "pinnedTop" dependiendo de la posición de desplazamiento actual de la página.

Answer 2

Pruebe esta solución usando un poco de jQuery y CSS. Se le debe dar el mismo efecto con un poco menos trabajo ...

http://jqueryfordesigners.com/fixed-floating-elements/

Answer 3

Aquí es una demostración de un plugin de jQuery que se encarga de esto. Este complemento tiene sus raíces en el excelente tutorial que Joe sugirió anteriormente, pero lleva la solución proporcionada en el tutorial un poco más lejos.

Demostración: http://jsfiddle.net/y3qV5/

Plugin y fuente: https://github.com/bigspotteddog/ScrollToFixed

Uso:

$(document).ready(function() { 
    $('#cart').scrollToFixed(); 
});