1

基本上我有 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;
}

任何帮助将不胜感激！

4

3 回答 3

2

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

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

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

.fixed { position: fixed; }

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

希望有帮助！

于 2013-03-05T04:19:41.067 回答
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 像素值。

于 2013-03-05T04:43:10.447 回答
1

试试这个：

$(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");
    });
于 2013-03-05T05:27:15.807 回答