javascript - 元素在滚动时与其他元素重叠

Question

我在整个互联网上到处搜索答案/示例，但似乎没有找到任何东西......但我确信它存在。

我正在寻找执行以下操作的插件或代码片段:

页面上的两个容器元素，两个高度都由其内容决定。这些不能是固定元素，因为有内容可以滚动浏览。我所追求的是在滚动并到达第二个元素时，它会向上滚动到第一个内容上。我真的不知道如何编写代码，但我所做的是生成了两个 jsFiddle。一种具有预期效果但具有固定元素，然后一种可以进行处理。

希望大家帮帮忙

$('.second-container').appear();
$(document.body).on('appear', '.second-container', function() {
    alert('appears');
});

http://jsfiddle.net/m7b7nzjc/1/ (固定示例) http://jsfiddle.net/m7b7nzjc/ (准备好使用并且有 jquery.appear)

干杯， R

Answer 1

我想这就是您要找的:http://jsfiddle.net/94xjdnqx/2/

当第一个 div 的底部位于窗口底部时，开始将第二个 div 向上移动到第一个 div 之上。这实际上并没有将第二个向上移动到第一个之上，而是将第一个向下移动以提供相同的外观。有一种情况要确保第一个 div 不会随着滚动条继续向下移动，这会在第一个 div 高于第二个时导致无限滚动条。

主要逻辑在这里:

$(document).scroll(function() {
    var viewBottom = document.body.scrollTop + $(window).height();
    if (viewBottom > $('.first-container').height())
    {
        var offset = viewBottom - $('.first-container').height()

        if (offset <= $(window).height())
        {
            $('.first-container').css({top: offset + 'px'});
        }
    }
});

我不确定 document.body.scrollTop 的跨浏览器兼容性如何，我使用的是 Chrome，它可以正常工作。