CSSやJSでdivを動かす（動的に）のですか？

Question

ユーザがスクロール（例えば固定）している間にCSSを使ってdivを画面に移動させることは可能ですか？しかし、別のものにヒットした場合はストップし、さらにスクロールするとジャンプします。

想像できるように... たとえば、たくさんのテキストを持つ3つのdivがある場合、ユーザーが前方を読むときにdivのそれぞれの下にあるdivにジャンプする可能性がありますか？

Answer 1

私はhttps://github.com/brandonaaron/jquery-overlapsを使用して、移動のdivをスロットにこのような何かをするためにあなたをお勧めします：

$(window).scroll(function() { 
    var movingDiv = $('.moving-div'); 

    if (movingDiv.overlaps('.static-div') 
      && !movingDiv.hasClass('slotted')) { 
     $('.static-div').before(movingDiv); 
     movingDiv.css('position', 'static'); 
     movingDiv.addClass('slotted'); 
    } 
}); 

コードは単なるヒントであり、あなたはまた、「unslotting」移動するための機能をバインドする必要がありますdiv。

Answer 2

固定ダミーオブジェクトと同じプロパティを持つ透明ダミーオブジェクトを使用して数式を作成します。

$(window).scroll(function(){ 
    var b1_fo = $("#dummy").offset().top + $("#dummy").height(); 
    var b2_fo = $("#b2").offset().top + $("#b2").height(); 
    if(b1_fo > $("#b2").offset().top && b1_fo < b2_fo + $("#dummy").height()){ 
     $("#b1").css({top:$("#b2").offset().top - $("#b2").height(),position:'absolute'}) 
    } else { 
     $("#b1").removeAttr('style') 
    } 
}) 

の作業例：http://jsfiddle.net/LpULy/