Бесконечные петлевые столбцы в обоих направлениях

Я работаю над сайтом на двух столбцах, когда вы прокручиваете: столбец A поднимается, а столбец B падает. Я внедрил бесконечную прокрутку, но мне интересно: возможно ли клонировать/добавлять один столбец на другой, например. при определенной длине прокрутки:

После прокрутки вне поля зрения:

  • Колонки A будут перемещаться в конец столбца B
  • Колонки столбцов B будут перемещаться в конец столбца A

Технически все еще бесконечно, но зацикливание ящиков от столбца к столбцу - проливание одного на другое и обратно.

Этот подход плохой, или, лучше ли использовать бесконечный свиток на каждом столбце? Что меня сбивает с толку, так как я новичок в JS и jQuery, это логика... и какой лучший подход для этого.

movement of columns example

* Изображение только, например, количество ящиков может быть намного выше, например. 10 в каждом столбце.

Мой код: http://jsfiddle.net/djsbaker/vqUq7/1/

Моя текущая попытка клонирования/добавления:

      var ele = document.getElementById("box");
      var arr = jQuery.makeArray(ele);
      var data = (ele)[0];

      $(window).scroll(function() {

        if ( $(window).scrollTop() >= 1000) {

          $(data).clone().appendTo('body');

        } else {

        }

      });

Ответы

Ответ 1

Бесконечная прокрутка. Сделано: Fiddle http://jsfiddle.net/PgMUP/14/

Вы все установили.

Код (немного понемногу):

var num_children = $('#up-left').children().length;
var child_height = $('#up-left').height() / num_children;
var half_way = num_children * child_height / 2;
$(window).scrollTop(half_way);
var ul = '#up-left'; 
var dr = '#down-right'; 
function crisscross() {
    $(ul).css('bottom', '-' + window.scrollY + 'px');
    $(dr).css('bottom', '-' + window.scrollY + 'px');
    var ulc = $(ul).children();
    var drc = $(dr).children();
    var corners = [ulc.first(),ulc.last(),drc.last(),drc.first()];
    if (window.scrollY > half_way ) {
        $(window).scrollTop(half_way - child_height);
        corners[2].appendTo(ul);    
        corners[0].prependTo(dr);
    } else if (window.scrollY < half_way - child_height) {
        $(window).scrollTop(half_way);
        corners[1].appendTo(dr);
        corners[3].prependTo(ul);
    }
}
$(window).scroll(crisscross);

Это работает, как показывает ваша диаграмма. Мерцание вызвано тем, что происходит перезапуск браузера. Лучше, вместо того, чтобы отделять и вставлять div, я считаю, что это просто swap атрибуты между двумя div. Скажите все, что у вас есть, изображения, текст, цвета, классы css, просто поменяйте их на все с большой функцией общего обмена. Затем, поскольку сами контейнеры остаются фиксированными.

Я добавляю, содержащий divs и заменяющий внутренний div, поэтому структура размеров столбцов была сохранена, но это не сработало.