Есть div, движущийся (динамически) с CSS или JS?

Question

Возможно ли с помощью css сделать перемещение div с экраном, пока пользователь выполняет прокрутку (например, фиксированную), но затем останавливается, если он нажимает другую, и перепрыгивает через нее, если пользователь прокручивает дальше.сделать это вообразимым ... например, если у вас есть 3 элемента div с большим количеством текста, возможно ли, чтобы элемент div прыгал в слоты под каждым из них, когда пользователь читает вперед?

Answer 1

Сделайте математику, используя прозрачный фиктивный объект, который имеет те же свойства, что и фиксированный.

$(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/

Answer 2

Я бы посоветовал вам использовать 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');
    }
});

Код - это просто подсказка, и вам также нужно связать функциюдля "снятия" движущегося div.