Question

基本上我有4个div（横幅，左内容，正确内容和页脚）。横幅和左侧内容div是固定的，而右侧内容和页脚则不是。我想要发生的是当页脚的顶部与左侧内容div的底部相遇时，它会自动解除固定并与右侧div一起滚动。

我在下面的jsfiddle中设置了我目前所拥有的预览。

<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

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

使用Javascript获取div和页脚
使用onscroll侦听器，侦听页脚何时“取消修复”
如果发生这种情况，请使用className向论坛添加课程"fixed"

在CSS中，您应该添加：

.fixed { position: fixed; }

使用jQuery也可以让所有这些变得更容易。

希望有所帮助！

Answer 2

我分叉了小提琴：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 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");
    });

滚动时固定/解除固定Div

3 个答案: