Javascript 元素在滚动条上重叠

我在互联网上到处寻找答案/例子，但似乎什么都没找到。。。但我相信它是存在的

我正在寻找一个插件或代码片段，它可以执行以下操作：

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

我希望你们能帮忙

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

（固定示例） （准备好使用并具有jquery.appeage）

干杯，

---

R

要让第二个元素在另一个元素上滚动，您只缺少了一点CSS。导致页面左侧的空白作为正文边距的问题。如果你看这把小提琴，你会看到正确的边距：

我添加的CSS：

    body{
        margin: 0px;
    }

更新

我已经更新了我的fiddle（），在用户滚动超过阈值后，通过编程将第二个div滚动到第一个div的顶部

var hasScrolled = false;

$(document).on('scroll', function() {
    var secondDivTop = $(".second-container").position().top;
    var scrollPos = $(document).scrollTop();

    if(scrollPos <= secondDivTop && !hasScrolled){
        $('html, body').animate({
        scrollTop: $(".second-container").offset().top}, 300);
        hasScrolled = true;
    }    
});

var hasScrolled=false；
$（文档）.on（'scroll'，function（）{
var secondDivTop=$（“.second container”）.position（）.top；
var scrollPos=$（document.scrollTop（）；
如果（scrollPos有趣……我以另一种方式读到……您希望第二个DIV捕捉到第一个DIV

我的方法是将两个div定位为绝对值，并在弹出回调时更改z索引。这会导致在向下滚动时蓝色div“捕捉”红色div。当向上滚动时，仍然可以看到蓝色div


我想这就是你想要的：

当第一个div的底部位于窗口的底部时，开始将第二个div向上移动到第一个div上。这实际上不会将第二个div向上移动到第一个div上，但会将第一个div向下移动以提供相同的外观。有一种情况可以确保第一个div不会随着滚动条不断向下移动，这将导致无限的scro第一个div高于第二个div时的llbar

主要逻辑如下：

$(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'});
        }
    }
});

$（文档）。滚动（函数（）{
var viewBottom=document.body.scrollTop+$（window.height（）；
如果（viewBottom>$（'.first container'）.height（））
{
var offset=viewBottom-$（'.first container'）.height（）
如果（offset像这样的东西怎么样？
（仅添加了最小高度和左侧定位）


$（文档）.on（'scroll'，函数（事件）{
//根据偏移量检查元素是否在页面上
if（（$（'.second container'）.offset（）.top-$（window.height（））<$（document.scrollTop（））{
$（'.second container'）.css（'position'，'relative'）；
$（'.second container'）.css（'top'，
$（'.first container'）.height（）-$（窗口）.height（）-$（文档）.scrollTop（）
);
$（'.first container'）.css（'top'，
$（文档）.scrollTop（）-$（窗口）.height（）
);
}否则{
//如果向上滚动，则重置职位
$（'.first container'）.css（'top'，0）；
$（'.second container'）.css（'top'，0）；
}
})；
。第一个容器{
位置：相对位置；
背景：红色；
排名：0；
最小高度：800px；
}
.第二个货柜{
背景：蓝色；
位置：相对位置；
左：30px；
顶部：0px；
最小高度：400px；
}

埃涅·维韦拉·朗库斯·佩德（Aenean viverra rhoncus pede）、欧迪欧前庭（odio）、埃古斯塔（Maecenas egestas arcu quis ligula mattis Placelat）、酒后驾车（Cras id dui）、欧迪欧吊带（Suspendisse eu-ligula）、欧迪欧（odio）中的一位女修女（Present Nonny mi）、塞德·莫利斯（Sed mollis）、厄洛斯（eros）和乌尔特里斯（
一个兽人，一个节拍，一个调味品朗卡斯，一个自由的人，坐在同一张桌子上，一杯苏打水，一杯苏打水，奥古斯·维利特·库苏斯·努克，一个自由的孕妇，两杯酒，莫比·马蒂斯
乌拉姆·科珀·维利特。桑比前庭蜗壳。整型tincidunt。无变异矢状舌苔。在马萨诸塞州种植玉米。在自由市场上种植玉米。在酒后种植玉米。多奈克·维塔或多乐·鲁特姆拍卖行。多奈克·米·奥迪奥，福西布斯，节杖
这是一个很好的例子，它的意思是“我的朋友，福西布斯在，这是一个很好的例子”，它的意思是“我的朋友，福西布斯在，这是一个很好的例子”，它的意思是“我的朋友”
埃格斯塔斯。佩伦特斯凯·埃格斯塔斯，艾米特·康瓦利斯·普尔维纳尔，朱斯托·努拉·埃利芬德·奥古斯，奥克西·利奥·诺伊斯特的拍卖师。怀孕的母亲塞姆佩尔·尼西。
一个有趣的问题，特别是我想知道页面上的另一个内容是什么，以及您将如何让所有这些都一起工作

嗯，HTML：

<div class="first-container"></div>
<div class="second-container"></div>

JavaScript:

$(function(){
    var height1 = $(".first-container").outerHeight(),
        height2 = $(".first-container").outerHeight()

    $(document.body).css("min-height",height1 + "px")
    $(".second-container").css("top",height1 + "px")

    $(window).scroll(function() {
        var scroll = $(window).scrollTop()

        if (scroll <= height1) $(".first-container").css("top",$(window).scrollTop() + "px");
        else  $(".first-container").css("top",height1 + "px")
    });
})

$（函数（）{
var height1=$（“.first container”）.outerHeight（），
高度2=$（“.first container”）.outerHeight（）
$（document.body）.css（“最小高度”，高度1+“px”）
$（“.second container”）.css（“顶部”，高度1+“px”）
$（窗口）。滚动（函数（）{
var scroll=$（窗口）.scrollTop（）
如果（滚动哪个浏览器？要么它在我的浏览器中按预期工作，要么我不理解这个问题。我建议您查看并采用skrollr样式表：……您也可以查看skrollr……您的JSFIDLE已关闭，但如果您调整窗口大小并在.first容器中剪切文本，您将看到无法滚动它，因为它是一个固定的con。）tainer。我想说的是，你可以滚动第一个容器，特别是当它被剪裁时，一旦你到达底部，第二个容器就会开始向上滚动。谢谢你，Simon。请参阅我的评论以获得上述答案。“你的JSFIDLE已经关闭，但是如果你调整窗口大小并在第一个容器中剪裁文本，你会看到你无法滚动它。”因为它是一个固定的容器。我要的是y
body {
    position: relative;
    padding: 0;
    margin: 0
}

.first-container {
    background: red;
    height: 1200px;
    width: 100%;
    position: absolute;
    top: 0;
}
.second-container {
    background: blue;
    height: 1200px;
    width: 99%;
    position: absolute;
    right: 0
}

$(function(){
    var height1 = $(".first-container").outerHeight(),
        height2 = $(".first-container").outerHeight()

    $(document.body).css("min-height",height1 + "px")
    $(".second-container").css("top",height1 + "px")

    $(window).scroll(function() {
        var scroll = $(window).scrollTop()

        if (scroll <= height1) $(".first-container").css("top",$(window).scrollTop() + "px");
        else  $(".first-container").css("top",height1 + "px")
    });
})