隐藏元素一旦滚动到其容器的顶部

Question

我有一个overflow: scroll容器内的元素。所以这是伟大的。然而，我所想是元素滚动，因为它是做什么，但一旦元素溢出其-grandparents-容器的顶部，我想整个元素隐藏起来，而不是被裁剪，因为它滚动出的图（通常功能性）。

此前我已经得到的元素隐藏/显示，当我滚动窗口，但我其实想的元素隐藏/显示，当我把它的滚动的容器（和溢出时将它的祖父母容器）内的元素，而不是当我滚动窗口。

jQuery

$(document).scroll(function () {

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

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

});

所以我的理解是，试图做到这一点是jQuery的问题，当一个元素已经溢出：它和scrollTop的（）通常只涉及到滚动窗口滚动。我不能工作了如何在一个可行的办法做element.scrollTop（）。任何帮助将不胜感激。

html

<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>

css

.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;
}

编辑小提琴这里http://jsfiddle.net/3cdha2sy/29/

目前jQuery的是没有做，因为我已经发挥与它周围这么多的东西，现在它甚至没有隐藏在窗口滚动。我真的很感谢所有帮助。

Answer 1

您可以使用jQuery的position找到滚动内容与其父之间的相对距离。

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

注：我从您的原始CSS改变一两件事。而不是使用margin-top创建滚动的内容从父顶部偏移的，我使用padding-top。这使简单的数学偏移。

var content = $('.scroll-content');

function scrollHandler() {
  if (content.position().top <= 0) {
    content.hide();
  }
}

$('.scroll-container').scroll(scrollHandler);

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

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scroll-container">
  <div class="inner-container">
    <div class="scroll-content"> Content goes here Content goes here Content goes here
    </div>
  </div>
</div>

http://jsfiddle.net/7wcL46k0/2/

编辑：

滚动回落后重新出现的框，你需要跟踪父元素，你的情况，.inner-container。其原因是.scroll-content，之后被隐藏，不再上报position().top。然而，.inner-container是不是隐藏着一种无形的容器，因此，继续报告其position().top。

var content = $('.scroll-content');
var innerContainer = $('.inner-container');

function scrollHandler() {
  if (innerContainer.position().top <= 0) {
    content.hide();
  } else {
    content.show();
  }
}

$('.scroll-container').scroll(scrollHandler);

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

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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 fadeOut.
    </div>
  </div>
</div>

http://jsfiddle.net/5k8ty2dw/