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

Question

我在容器中有一个元素 overflow: scroll。所以这很好，但是我想要的是让元素在滚动时滚动，但是一旦元素溢出其 -grandparents- 容器的顶部，我希望整个元素隐藏，而不是在滚动时被裁剪看不见（通常的功能）。

以前，当我滚动 window 时，我得到了一个 hide/show 的元素，但是当我在它的容器内滚动元素时，我实际上想要该元素 hide/show （当它溢出它的祖父母容器时），而不是当我滚动 window 时。

jQuery

$(document).scroll(function () {

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

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

});

所以我的理解是，当元素上已经有 overflow:scroll 并且 scrollTop() 通常只与滚动 window 相关时，在 jQuery 中尝试这样做是有问题的。我不知道如何以有效的方式执行 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;
}

在此处编辑 fiddle http://jsfiddle.net/3cdha2sy/29/

目前 jQuery 没有做任何事情，因为我已经玩了这么多，现在它甚至没有隐藏在 window 滚动条上。如果有任何帮助，我将不胜感激。

Answer 1

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

Get the current coordinates of the first element in the set of matched elements, relative to the offset parent.

注意：我改变了你原来的一件事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/