Jquery 将元素滚动到容器顶部后隐藏该元素

我在一个容器中有一个元素，带有

溢出：scroll

。这很好，但是，我想要的是元素在它运行时滚动，但是一旦元素溢出了它的祖父母容器的顶部，我想要整个元素隐藏起来，而不是在它滚动出视图时被裁剪（通常的功能）

以前，当我滚动窗口时，我得到了一个隐藏/显示的元素，但是我实际上希望在滚动其容器内的元素时（当它溢出其祖父母容器时），而不是在滚动窗口时，该元素隐藏/显示

jQuery

$(document).scroll(function () {

 if ($('.inner-container').scrollTop()) {
    $('.scroll-content').css({'display': 'none'});   

} else {
  $('.scroll-content').css({'display:' : 'block'});
  }

});

<div class="scroll-container">

<div class="inner-container">
  <div class="scroll-content"> I want this to scroll as it is and then hide all of the orange block when it overflows outside of its container.. i.e the top of the orange block hits the top of the yellow block. The orange block should hide. 
  </div>
 </div>
</div>

.scroll-container {
 width: 200px;
  height: 200px;
  background-color: yellow;
  overflow: scroll;
  margin-left: 50px;
  margin-top: 50px;
}

.inner-container {
  width: 150px;
  height: 400px;
}

.scroll-content {
  margin-top: 30px;
  width: 190px;
  height: 150px;
  background-color: orange;
}

所以我的理解是，在jQuery中，当一个元素已经溢出时，尝试这样做是有问题的：scroll on和scrollTop（）通常只与滚动窗口相关。我不知道如何以一种有效的方式执行element.scrollTop（）。任何帮助都将不胜感激

html

$(document).scroll(function () {

 if ($('.inner-container').scrollTop()) {
    $('.scroll-content').css({'display': 'none'});   

} else {
  $('.scroll-content').css({'display:' : 'block'});
  }

});

<div class="scroll-container">

<div class="inner-container">
  <div class="scroll-content"> I want this to scroll as it is and then hide all of the orange block when it overflows outside of its container.. i.e the top of the orange block hits the top of the yellow block. The orange block should hide. 
  </div>
 </div>
</div>

.scroll-container {
 width: 200px;
  height: 200px;
  background-color: yellow;
  overflow: scroll;
  margin-left: 50px;
  margin-top: 50px;
}

.inner-container {
  width: 150px;
  height: 400px;
}

.scroll-content {
  margin-top: 30px;
  width: 190px;
  height: 150px;
  background-color: orange;
}

在这里编辑小提琴

---

目前，jQuery没有做任何事情，因为我一直在使用它，现在它甚至没有隐藏在窗口滚动上。非常感谢您的帮助。

您可以使用

jQuery

查找滚动内容与其父项之间的相对距离

获取匹配元素集中第一个元素的当前坐标 元素，相对于偏移父元素

注意：我更改了您原来的

CSS

中的一项内容。我没有使用

边距顶部

来创建相对于父级顶部的滚动内容偏移量，而是使用

填充顶部

。这使偏移量的计算保持简单

var content=$（'.scroll content'）；
函数scrollHandler（）{
if（content.position（）.top您正在将滚动条应用于文档而不是元素，因此不会发生任何事情Hi Andy，非常感谢。这太棒了。@kahlo我很高兴它对您有效。您能将我的答案标记为选中的答案吗？哦，太棒了，再次感谢。我的项目在实现这一点时遇到了一些问题，我想，因为我有一些Ajax问题，我有重新加载页面以使其再次运行。目前我只是想了解一下，但这是Ajax友好的吗？或者我的代码中正在进行的事件太多了。@kahlo我上面写的代码根本不会干扰Ajax请求。祝你好运。