Magnet div: feste div innen absolute positionierte div

Question

Ich habe folgende Seite:

[LINK]

Die Seite ausgebildet ist, horizontal gescrollt werden, so daß eine Reihe von divs (schwarz umrandet ist) in einem erscheinen Reihe.

Nun, ich die kleineren divs innerhalb (rot) zu verhalten, so dass sie nie außerhalb der Eltern div gehen, aber gleichzeitig während der Bildlauf, ich möchte sie innerhalb der Eltern div bewegen, als ob sie waren fest positioniert.

Ich werde mich mit einem Diagramm erklären. Ich möchte, dass meine divs so verhalten:

[LINK]

Wer kann helfen? Vielen Dank für Ihre Zeit!

Answer 1

UPDATE

---

erstellt eine minimale/experimental jQuery-Plugin: https://gist.github.com/3177804

Sie sollten in der Lage sein, wie diese zu nutzen: http://jsfiddle.net/7q3Zu/2/

herunterladen und schließen Sie das Plugin https://raw.github.com/gist/3177804/556074672de8f200327d83f0146d98533c437ac3/jquery.magnetic.js dann nenne es wie th ist:

$(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 dies ist nur ein Experiment ohne Garantie in jedem Browser arbeiten

(so fühlen sich frei, den Kern zu greifen und verbessern :)

---

Wie erwähnt in die Kommentare könntest du mit Javascript machen.

Hier am Beispiel mit 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; 
}