magnetic div: fixed div inside absolute positioned div

Question

I have the following page:

[LINK]

The page is designed to be scrolled horizontally, so that a series of divs (black bordered ones) appear in a row.

Now, I the smaller divs inside (red ones) to behave so that they never go outside the parent div but at the same time, while scrolling the page, I want them to move inside the parent div like if they were fixed-positioned.

I'll explain myself with a diagram. I want my divs to behave like this:

[LINK]

Anyone can help? Thanks for your time!

Answer 1

UPDATE

---

created some minimal/experimental jQuery plugin: https://gist.github.com/3177804

you should be able to use it like this: http://jsfiddle.net/7q3Zu/2/

download and include the plugin https://raw.github.com/gist/3177804/556074672de8f200327d83f0146d98533c437ac3/jquery.magnetic.js then call it like this:

$(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 this is just an experiment with no warranty of working in any browser

(so feel free to grab the gist and improve it :)

---

As mentioned in the comments, you could do this with Javascript.

Here's am example using 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;
}