滚动时固定/取消固定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

我分叉了小提琴：http://jsfiddle.net/YK72r/2/

我所做的是在每个滚动事件上调用if，使用一些度量数学来找到所需的高度，使用jQuery的css方法更改左边栏的css，然后添加一条else语句在向上滚动时将其还原。

var scrollHeight;

$(window).ready(function() {
    scrollHeight = $('#footer').offset().top - $('#left').height() - $('#left').offset().top;
});

$(window).scroll(function() {
    if ($(document).scrollTop() >= scrollHeight) {
        $('#left').css({
            'position': 'relative',
            'margin-top': '350px'
        });
    } else {
        $('#left').css({
            'position': 'fixed',
            'margin-top': '100px'
        });
    }
});

请注意，我稍微更改了高度，因此要注意css像素值。

Answer 2

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

1. 使用Javascript通过onscroll侦听器获取页脚和页脚
2. 的像素位置，侦听页脚何时应该对
3. 进行“解锁”发生这种情况时，使用className将类<代码>D9添加到页脚<代码>H210<代码>G211

在CSS中，您应该添加：

.fixed { position: fixed; }

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

希望这能有所帮助！

Answer 3

试试这个：

$(window).scroll(function () {
        var ftop = $("#footer").position().top;
        var lbottom = $("#footer").position().top + $("#left").height();

        var scrollTop = $(window).scrollTop();
        var diff = ftop - scrollTop;

        if( diff <= lbottom)
        $("#left").css("position","static");
        else
        $("#left").css("position","fixed");
    });