cracknhack
New Member
I am looking for help or a solution to a flicker/slight jump, when scrolling, on an endless scrolling website, which can be seen in this fiddle (the right hand column): http://jsfiddle.net/djsbaker/j3d8r/1/What seems to be causing the jump is "\[code\]$(window).scrollTop(half_way - child_height);\[/code\]". If I remove "\[code\]- child_height\[/code\]" there is no longer a flicker but the page no longer scrolls properly. This can be seen in this fiddle: http://jsfiddle.net/djsbaker/x5Tsp/3/The website is two columns, scrolling in opposite directions, with each column split into boxes. When scrolled the boxes that have moved out of view swap onto the opposite column, one by one, creating an endless loop.The full code:\[code\]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);function crisscross() { $('#up-left').css('bottom', '-' + window.scrollY + 'px'); $('#down-right').css('bottom', '-' + window.scrollY + 'px'); var firstLeft = $('#up-left').children().first(); var lastLeft = $('#up-left').children().last(); var lastRight = $('#down-right').children().last(); var firstRight = $('#down-right').children().first(); if (window.scrollY > half_way ) { $(window).scrollTop(half_way - child_height); lastRight.appendTo('#up-left'); firstLeft.prependTo('#down-right'); } else if (window.scrollY < half_way - child_height) { $(window).scrollTop(half_way); lastLeft.appendTo('#down-right'); firstRight.prependTo('#up-left'); }}$(window).scroll(crisscross);\[/code\]