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

Question

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

以前，当我滚动窗口时，我有一个要隐藏/显示的元素，但是我实际上希望当我在它的容器内滚动该元素时隐藏/显示该元素(当它溢出它的祖 parent 容器时)，不是当我滚动窗口时。

jQuery

$(document).scroll(function () {

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

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

});

所以我的理解是，当元素已经有 overflow:scroll 并且 scrollTop() 通常只涉及滚动窗口时，在 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 没有做任何事情，因为我已经玩了这么多，现在它甚至没有隐藏在窗口滚动中。如果有任何帮助，我将不胜感激。

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/