Question

I have been working on two column website, whereby when you scroll: column A goes up and column B goes down. I implemented an infinite scroll but what I am wondering is: is it possible to clone/append one column onto the other e.g. at a certain length of scrolling:

Once scrolled out of view:

• Column A boxes will move onto the end of column B
• Column B boxes will move onto the end of column A

Technically still infinite but looping the boxes from column to column – spilling one into the other and back again.

Is this approach bad, or, is it better to just use endless scroll on each column? What is tripping me up, as I am new to JS and jQuery, is the logic, and what is the best approach to achieve this.

*Image just for example, the amount of boxes could be a lot higher e.g. 10 in each column.

My code so far: http://jsfiddle.net/djsbaker/vqUq7/1/

My current attempt at clone/append:

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 {
    ..
  }
});

Answer 1

Infinite scrolling. Done : the Fiddle http://jsfiddle.net/PgMUP/14/

You had set everything up.

The code (neatened up a little) :

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

It works as your diagram suggests. The flicker is caused because browser reflow is triggered. A better method, instead of detaching and then inserting the divs, I believe would be simply to swap the attributes between two divs. Say whatever you have in there, the images, the text, the colors, the css classes, just swap that across with a big all purpose swap function. Then, since the containers themselves will remain fixed.

I adding containing divs and swapping the inner div out, so the size structure of the columns was preserved, but this did not work.