Css 如何停止滚动超过窗口高度的div？

在#容器（位置：相对）的内部，我有两个分区：两个分区都有50%的宽度，第一个分区非常高（位置：相对），第二个分区至少有2000px高

有没有办法在到达底部时第二次停止滚动，但继续滚动其他内容？如果没有额外的父div，那就太好了。 小提琴：

#容器{
位置：相对位置；
}
#首先{
宽度：50%；
背景：#333；
高度：10000px；
}
#第二{
位置：绝对位置；
右：0；
排名：0；
宽度：50%；
高度：2000px；
背景：白鹭；
}

---

实现这一点的一种方法是使用-尽管请确保检查for it是否满足您的要求

*{margin:0；padding:0；}
#首先{
背景：#333；
显示：内联块；
高度：10000px；
垂直对齐：底部对齐；
宽度：50%；
}
#第二{
背景：线性梯度（0度，#f00，#090）；
底部：0；
显示：内联块；
高度：2000px；
位置：粘性；
垂直对齐：底部对齐；
宽度：50%；
}

---

这不是一个完整的答案，但它可能会帮助您前进- 检查滚动位置和视口高度，并将其与第二个元素的高度进行比较-

看看这把小提琴，看看我的例子。使用jquery完成

$（文档）.ready（函数（）{
console.log（“准备就绪！”）；
var secondHeight=$（'#second'）.height（）；
控制台日志（第二高度）；
var=0；
$（窗口）。滚动（功能（事件）{
var scroll=$（窗口）.scrollTop（）；
var viewportHeight=$（窗口）.height（）；
//做点什么
console.log（滚动+视口高度）；
如果（secondHeightjquery“粘性”解决方案


你对JS或jQuery解决方案持开放态度吗？天哪，我好像完全迷失在时间里了，我从来没有听说过他们添加了这个职位。我会测试一下，但现在使用它似乎不够安全，希望避免使用脚本，但似乎这是唯一的方法。谢谢！Hi@DemuriCelidze，你能检查一下这个吗，我是这样执行的现在，我遵守了你的规则，谢谢，这是一个有趣的解决方案，我会尝试一下。
$( document ).ready(function() {
console.log( "ready!" );
var secondHeight = $('#second').height();
console.log(secondHeight);

var stopper = 0;

$(window).scroll(function (event) {
var scroll = $(window).scrollTop();
var viewportHeight = $(window).height();
    // Do something
  console.log(scroll+viewportHeight);



  if(secondHeight <= scroll+viewportHeight) {
  console.log('stop it here');
  stopper = 1;
  } else {
  stopper = 0;
  }
  console.log(stopper);

  if(stopper == 1) {
   $('#second').css('position','fixed');
   console.log('making it fixed');
  } else {
   $('#second').css('position','absolute');
   console.log('making it absolute');
  }


    });


});

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

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