Question

我试图让 #content 和 #content-sidebar my Wordpress blog的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'替换'$'并解决了这个问题。

感谢

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

1 个答案: