css - 如何停止滚动比窗口高度长的div？

Question

在 #container (position:relative) 内部，我有 2 个 div:都是 50% 宽，#first 非常高 (position:relative)，#second 至少 2000px 高。

有什么方法可以让 #second 在到达底部时停止滚动，但继续滚动其他内容吗？如果不为其创建额外的父级 div 就太好了。 fiddle :https://jsfiddle.net/Moor/ha4zybpb/

#container{
    position:relative;
}
#first{
    width:50%;
    background:#333;
    height:10000px;
}
#second{
    position:absolute;
    right:0;
    top:0;
    width:50%;
    height:2000px;
    background:limegreen;
}

<div id="container">
    <div id="first"></div>
    <div id="second"></div>
</div>

Answer 1

jquery“粘性”解决方案..

https://jsfiddle.net/cusjptLr/4/

var sh = $('#second').height();
$(window).scroll(function(){
  if (($(window).scrollTop() + $(window).innerHeight()) >= sh) {
   $('#second').addClass("sticky");
  }
});

#second.sticky {
  position: fixed;
  bottom: 0;
  top: initial;
}