Javascript 允许div滚动页面滚动，但仅在父div内

我有一个DIV，当用户向下滚动时，它需要尽可能多地留在页面上。它从顶部的父div内部开始。然后，当用户滚动时，它需要保持在页面上的位置，直到它到达div的底部，在那里它必须停止在页面上滚动，然后通过滚动页面顶部接受它的命运

困惑？我也是。下面是我希望在scroll上发生的事情的绘制图：

以下是目前正在发生的情况：

下面是我用来实现这一点的bodged jQuery：

  //Start div scrolling
  if ($(this).scrollTop() > 420 && $(this).scrollTop() < 1200) {
      $('.fixedElement').css({
          'position': 'fixed',
          'top': '0px'
      });

  }

  //Stop div scrolling
  if ($(this).scrollTop() < 420) {
      $('.fixedElement').css({
          'position': 'static',
          'top': '0px'
      });

  }

  //Div to stop scrolling as div will leave the parent div otherwise. Master does not want that.
  if ($(this).scrollTop() > 1200) {
      $('.fixedElement').css({
          'position': 'static',
          'top': '',
          'bottom': '0px'
      });

  }

//启动div滚动
如果（$（this.scrollTop（）>420&$（this.scrollTop（）<1200）{
$（'.fixedElement'）.css({
'位置'：'固定'，
“顶部”：“0px”
});
}
//停止div滚动
if（$（this）.scrollTop（）<420）{
$（'.fixedElement'）.css({
“位置”：“静态”，
“顶部”：“0px”
});
}
//Div停止滚动，否则Div将离开父Div。师父不想这样。
如果（$（this）.scrollTop（）>1200）{
$（'.fixedElement'）.css({
“位置”：“静态”，
“顶部”：“，
“底部”：“0px”
});
}

然而，我需要通过试错来猜测何时让div停止移动。有更好的办法吗

---

我知道以前有人问过这个问题，我也对它进行过研究，但是很多结果只是显示了如何让它移动，而不是如何让它停在div的底部。

如果我正确理解了您的问题，您希望

内部

div保持其位置，只要屏幕顶部不超过

parent

div的高度减去

internal

div的高度，就可以退出

因此，您只需检查以下条件：

if($(this).scrollTop() >= 0 && $(this).scrollTop() < ($('.parent').height() - $('.inner').height())){ 
     //fix the inner div here
 } else {
     //unfix it
 }

如果（$（this.scrollTop（）>=0&&$（this.scrollTop（）<（$（'.parent'）.height（）-$（'.inner'）.height（））{
//在这里固定内部div
}否则{
//解开它
}

您能提供相关的HTML/CSS代码吗？所有这些功能都在

滚动事件中吗？e、 g.@xpy是的，基本上是这样。它在一个由scroll事件调用的函数中。谢谢，我会尽快检查这个。编辑：刚刚检查了小提琴，这是完美的非常感谢！