div magnético: div fijado en el interior absoluta div posicionado

Question

Tengo la siguiente página:

[LINK]

La página está diseñado para ser desplazado horizontalmente, de modo que una serie de divs (los negros confinado) aparecen en una fila.

Ahora, los divs más pequeños dentro (rojos) me comporto para que nunca salgan del div principal pero al mismo tiempo, mientras se desplaza por la página, quiero que se muevan dentro del div principal como si fueran posición fija.

Me explicaré con un diagrama. Quiero que mis divs que se comportan de esta manera:

[LINK]

Cualquiera puede ayudar? ¡Gracias por tu tiempo!

Answer 1

ACTUALIZACIÓN

---

creado algunas mínimas experimental plugin de jQuery /: https://gist.github.com/3177804

que debería ser capaz de utilizar de esta manera: http://jsfiddle.net/7q3Zu/2/

descarga e incluyen el plugin https://raw.github.com/gist/3177804/556074672de8f200327d83f0146d98533c437ac3/jquery.magnetic.js luego llámalo es:

$(function() { 

    $('.container').magnetic({ //call it on some scrollable container 
     selector: '.object', //what to fix 
     left: 180,    //when to fix (px) 
     right: 500    //when to unfix (px) 
    }); 

});​ 

atm esto es sólo un experimento sin la garantía de trabajar en cualquier navegador

(por lo que no dude en agarrar la esencia y mejorarlo :)

---

Como se menciona en los comentarios, puedes hacer esto con Javascript.

Aquí es am ejemplo usando jQuery:

http://jsfiddle.net/7q3Zu/

HTML

​<div class="container"> 
<div class="object"></div> 
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

JS

$(function() { 
    var obj = $('.object'); 
    $(document).on('scroll', function() { 

     var offset = $(this).scrollLeft() 
     //fix the position a some point  
     if (offset >= 200) { 
      obj.css('position', 'fixed').css('left', '20px'); 
     } 
     //..and unfix it later  
     if (offset >= 500) { 
      obj.css('position', 'absolute').css('left', '500px'); 
     } 

    }); 
});​ 

CSS

.container{ 
    width: 4000px; 
    padding: 20px; 
    margin: 20px; 
    border: 1px solid #ccc; 
    height: 400px; 
    position: relative; 
} 
.object{ 
    position: absolute; 
    height: 400px; 
    width :100px; 
    background: red; 
    left: 200px; 
}