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: /

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

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

• javascript
• jquery
• html
• infinite-scroll
• multiple-columns

• I at least removed that messy jquery from your code.... jsfiddle/oceog/KPHgv – zb' Commented Jan 24, 2013 at 11:23
• not really understand what you trying to do, If I scroll to the top of page, you want to append collumn A to the to of collumn B ? and if i scroll to the bottom ? – zb' Commented Jan 24, 2013 at 11:40
• @eicto Sorry about that, I was having a nightmare getting the jQuery to work with Prototype :( – DBUK Commented Jan 24, 2013 at 11:58
• 1 The pater noster of scrolling! – tobiv Commented Jan 28, 2013 at 10:03
• 1 This is a very cool idea. I guess you just need to keep moving the columns once you hit either end of the scroll. It would be a bad idea to continuously append and extend the length, and unnecessary. – Cris Stringfellow Commented Jan 28, 2013 at 10:52

1 Answer 1

Infinite scrolling. Done : the Fiddle http://jsfiddle/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.