javascript - 滚动时固定/取消固定 Div

Question

基本上我有 4 个 div(横幅、左侧内容、右侧内容和页脚)。横幅和左侧内容 div 是固定的，而右侧内容和页脚则不是。我希望发生的事情是，当页脚的顶部与左侧内容 div 的底部相遇时，让它自行取消固定并与右侧的 div 一起滚动。

我在下面的 jsfiddle 中设置了当前预览。

http://jsfiddle.net/sgcer/270/

<div id="banner">BANNER</div>
<div id="content">
    <div id="left">LEFT</div>
    <div id="right">RIGHT</div>
</div>
<div id="footer">FOOTER</div>

#banner {
    float: left;
    width: 100%;
    height: 100px;
    background-color: #00ff00;
    position: fixed;
}
#content {
    height: auto;
}
#left {
    float: left;
    width: 30%;
    height: 600px;
    background-color: #ccc;
    position: fixed;
    margin-top: 100px;
}
#right {
    float: right;
    width: 70%;
    height: 750px;
    background-color: #333;
    margin-top: 100px;
}
#footer {
    clear: both;
    width: 100%;
    height: 100px;
    background-color: #ff0000;
}

任何帮助将不胜感激!

Answer 1

以下是执行此操作的一些一般步骤:

1. 使用 Javascript 获取 div 和页脚的像素位置
2. 使用 onscroll 监听器，监听页脚何时应该“取消修复”
3. 发生这种情况时，使用 className 添加类 "fixed" 到页脚

在您的 CSS 中，您应该添加:

.fixed { position: fixed; }

使用 jQuery 也会让这一切变得更容易。

希望对您有所帮助!