I’m trying to make the #content and #content-sidebar DIV’s of my WordPress blog reach the bottom and top of the page at the same time when scrolling to avoid having all the whitespace that currently exists.

I’ve been able to successfully replicate what I am trying to achieve in JFIDDLE with the following code -

HTML

<div id="content">
    1<br />
    2<br />
    3<br />
    4<br />
    5<br />
    6<br />
    7<br />
    8<br />
    9<br />
    10<br />
    11<br />
    12<br />
    13<br />
    14<br />
    15<br />
    16<br />
    17<br />
    18<br />
    19<br />
    20<br />
    21<br />
    22<br />
    23<br />
    24<br />
    25<br />
    26<br />
    27<br />
    28<br />
    29<br />
    30<br />
    31<br />
    32<br />
    33<br />
    34<br />
    35<br />
    36<br />
    END<br />
</div>
<div id="content-sidebar">
    1<br />
    2<br />
    3<br />
    4<br />
    5<br />
    6<br />
    7<br />
    8<br />
    9<br />
    END<br />
</div>

Javascript

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

CSS

#content {
float: left;
margin: 0;
position: relative;
width: 400px;
}
#content-sidebar {
margin-left: 400px;
position: fixed;
width: 400px;
}

http://jsfiddle.net/eBk5f/

What I am trying to understand is, why is it that when I replicate this working, functional demonstration into the code of my WordPress site, it doesn’t function properly???

Is there some other code on my site overriding the code in the JFIDDLE???

I am currently auto-optimizing javascript files.

Any help would be greatly appreciated!

Read more here: How do I make 2 DIV’s with different heights reach the bottom of the page at the same time on scroll?


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: