使动态div元素像可折叠标题一样折叠

Question

我希望实现像this demo here之类的东西，但是对于类的每个元素，它将停止滚动并从底部向上拖动下一个div。这可能与打印机打印纸类似。我不确定它如何完全适用于JS方面，但我所拥有的是下面的内容。我很接近，但它不喜欢超过2个元素。添加对额外元素的支持将是惊人的，因为这可以作为库发布以实现效果。

如果以下代码段看起来不正常，请查看here on codepen。

$(document).ready(function() {
  $('.container:first-child').css('position', 'relative');
});
$(window).scroll(function() {
  $('.container').each(function(i) {
    var winheight = $(window).scrollTop() + $(window).height();
    var distToTop = $(this).position().top + $(this).height();
    var dist = distToTop - winheight;
    if ((dist) <= 0) {
      $(this).css('position', 'fixed').css('top', ($(this).children().height() - $(window).height()) / (-2) + 'px');

    } else if (dist == $(this).height()) {
      $(this).css('position', 'relative').css('top', $(window).height() + 'px').css('z-index','1');
    }
    console.log(dist + ' ' + i);
  });
});

body {
  margin: 0;
  padding: 0;
}
.container {
  position: fixed;
  top: 100%;
}
.container:first-child {
  background: tan;
  width: 100%;
  height: 100%;
}
.container:nth-child(2) {
  background: blue;
  width: 100%;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='big'>
  <div class='container'>
    <div class='t'>
      <img src='http://placehold.it/500x250'>
      <img src='http://placehold.it/500x250'>
    </div>
  </div>
  <div class='container'>
    <div class='t2'>
      <img src='http://placehold.it/500x250/fff'>
      <img src='http://placehold.it/500x250/fff'>
    </div>
  </div>
  <div class='container'>
    <div class='t'>
      <img src='http://placehold.it/500x250'>
      <img src='http://placehold.it/500x250'>
    </div>
  </div>
  <div class='container'>
    <div class='t2'>
      <img src='http://placehold.it/500x250/fff'>
      <img src='http://placehold.it/500x250/fff'>
    </div>
  </div>
</div>

由于窗户尺寸的差异，此网站上的演示目前有点不稳定。