javascript - 磁気 div: 絶対配置 div 内の固定 div

Question

次のページがあります。

[リンク]

このページは水平方向にスクロールするように設計されているため、一連の div (黒い枠で囲まれたもの) が一列に表示されます。

ここで、内側の小さな div (赤いもの) が親 div の外に出ないように動作させますが、同時に、ページをスクロールしているときに、固定されているかのように親 div 内に移動するようにします。

図を使って説明します。div を次のように動作させたい:

[リンク]

誰でも助けることができますか？御時間ありがとうございます！

Answer 1

アップデート

---

いくつかの最小限/実験的な jQuery プラグインを作成しました: https://gist.github.com/3177804

次のように使用できるはずです： http://jsfiddle.net/7q3Zu/2/

プラグイン https://raw.github.com/gist/3177804/556074672de8f200327d83f0146d98533c437ac3/jquery.magnetic.jsをダウンロードしてインクルードし、次の ように呼び出します。

$(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 これは単なる実験であり、どのブラウザーでも動作することを保証するものではありません

（ですから、気軽に要点をつかんで改善してください:)

---

コメントで述べたように、Javascript でこれを行うことができます。

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;
}