javascript – 元素与滚动上的其他元素重叠

2019年8月5日 146次阅读

我搜索了高低,并在互联网上寻找答案/例子,但似乎没有找到任何东西……但我确信它存在.

我正在使用插件或代码片段执行以下操作：

页面上有两个容器元素,两个高度都由它的内容决定.这些不能是固定元素,因为有内容可以滚动.我所追求的是在滚动并到达第二个元素时,它向上滚动到第一个内容.我真的不知道如何编写代码,但我所做的是生成了两个jsFiddles.一个具有所需效果但具有固定元素的一个,然后一个准备工作.

我希望你们能帮忙.

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

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

干杯,
[R

最佳答案 我认为这就是你要找的东西：
http://jsfiddle.net/94xjdnqx/2/

当第一个div的底部位于窗口底部时,开始将第二个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并且它可以工作.

点赞