How do I parallax the content and sidebar of my wordpress blog (http://robt.info/) to reach the footer of the page at the same time even though they are both different sizes.

Here is almost an exact replica of what I am trying to achieve.

$(document).ready(function(){
var doc = $(window);
$(window).bind('resize', function() {
    $("#rightPane").css('top', (calculateScrollSpeed()));
});
$(window).bind('scroll', function() {
    $("#rightPane").css('top', (calculateScrollSpeed()));
});
function calculateScrollSpeed() {
    var leftPaneHeight = $('#leftPane').height();
    var rightPaneHeight = $('#rightPane').height();
    var browserHeight = $(window).height();
    var leftPaneScrollTop = $(window).scrollTop();
    console.log((browserHeight - rightPaneHeight) / (browserHeight - leftPaneHeight));
    return -$(window).scrollTop() * ((browserHeight - rightPaneHeight) / (browserHeight - leftPaneHeight));
}
}); 

http://jsfiddle.net/bVfcX/21/

I have been attempting to use the exact same code on my site but have had no luck.

Anything I need to be doing differently?

Read more here: What is the best solution for making 2 seperate DIVs of different height reach the footer at the same time?


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.

Related Wordpress search:

, , , , , , ,

Wordpress related questions and answers: