Question

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

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

页面上有两个容器元素，两个高度都由它的内容决定。这些不能是固定元素，因为有内容可以滚动。我所追求的是在滚动并到达第二个元素时，它向上滚动到第一个内容。我真的不知道如何编写代码，但我所做的是生成了两个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

Answer 1

我认为这正是您所寻找的：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，但它确实有效。

Answer 2

要让第二个元素在另一个元素的顶部滚动，你只缺少一点CSS。引起页面左侧空间的问题是身体边缘。如果你看这个小提琴，你会看到更正后的保证金：http://jsfiddle.net/m7b7nzjc/7/

我添加的CSS：

    body{
        margin: 0px;
    }

的更新

我更新了我的小提琴（http://jsfiddle.net/m7b7nzjc/7/），以便在用户滚动后通过阈值以编程方式滚动第一个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; } });

Answer 3

有趣......我以不同的方式阅读...你希望第二个DIV捕捉第一个。

我通过将两个div定位为绝对并在出现的回调触发时更改z-index来完成我的操作。这导致蓝色div为＆＃34; snap＆＃34;向下滚动时，在红色div上方。向上滚动时，仍然会看到蓝色div。

http://jsfiddle.net/m7b7nzjc/5/

$(document.body).on('appear', '.second-container', function() {
    $('.second-container').css('z-index', '2');
});

Answer 4

这样的事情怎么样？（最小高度和左侧定位仅添加说明）

＆＃13;

$(document).on('scroll', function(event) {
  // Check if the element is on the page based on offset
  if (($('.second-container').offset().top - $(window).height()) < $(document).scrollTop()) {
    $('.second-container').css('position', 'relative');
    $('.second-container').css('top',
      $('.first-container').height() - $(window).height() - $(document).scrollTop()
    );
    $('.first-container').css('top',
      $(document).scrollTop() - $(window).height()
    );
  } else {
    // Reset postions if you scroll back up
    $('.first-container').css('top', 0);
    $('.second-container').css('top', 0);
  }
});

＆＃13;

.first-container {
  position: relative;
  background: red;
  top: 0;
  min-height: 800px;
}
.second-container {
  background: blue;
  position: relative;
  left: 30px;
  top: 0px;
  min-height: 400px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="first-container">Aenean viverra rhoncus pede. Vestibulum eu odio. Maecenas egestas arcu quis ligula mattis placerat. Cras id dui. Suspendisse eu ligula. Praesent nonummy mi in odio. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor
  urna a orci. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Nam eget dui. Morbi mattis
  ullamcorper velit. Morbi vestibulum volutpat enim. Integer tincidunt. Praesent ut ligula non mi varius sagittis. Praesent congue erat at massa. Sed libero. Fusce vel dui. Donec vitae orci sed dolor rutrum auctor. Donec mi odio, faucibus at, scelerisque
  quis, convallis in, nisi. Duis vel nibh at velit scelerisque suscipit. Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Phasellus accumsan cursus velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
  egestas. Pellentesque egestas, neque sit amet convallis pulvinar, justo nulla eleifend augue, ac auctor orci leo non est. Phasellus gravida semper nisi.
</div>
<div class="second-container">

</div>

＆＃13;

当然这是一个WIP，你可能还需要更多的东西。

Answer 5

有趣的问题，特别是我想知道页面上的另一个内容是什么以及你将如何将所有这些工作完全结合在一起。

嗯，HTML：

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

CSS：

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
}

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")
    });
})

简而言之：重要的事情：

容器设置为position: relative以允许两个容器绝对定位
容器最小高度由JavaScript设置，以始终保持滚动位于相同的最大点
第一个容器设置为top: 0，第二个容器设置在第一个容器后面，使用JavaScript
跟踪滚动事件（如果正文是容器，则为窗口，否则为容器），只需将第一个容器向下移动。

JSFiddle

很抱歉，如果我的回答错了，可能是因为误解了你的复杂任务。

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

5 个答案: