javascript - 如何使 2 个不同高度的 DIV 在滚动时同时到达页面底部？

Question

我正在尝试制作 my Wordpress blog 的 #content 和 #content-sidebar DIV滚动时同时到达页面底部和顶部，以避免出现当前存在的所有空白。

我已经能够使用以下代码成功复制我试图在 JFIDDLE 中实现的目标 -

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/

我想了解的是，为什么当我将这个有效的功能演示复制到我的 Wordpress 站点的代码中时，它无法正常运行？？？

我网站上是否有其他代码覆盖了 JFIDDLE 中的代码？？？

我目前正在自动优化 javascript 文件。

如有任何帮助，我们将不胜感激!

Answer 1

Adeneo帮我回答了这个问题。

因为我使用的是 Wordpress(处于无冲突模式)，所以我简单地将脚本中的“$”替换为“jQuery”并解决了这个问题。

谢谢