一旦元素滚动到其容器顶部，请隐藏该元素。

Question

一旦元素滚动到其容器顶部，请隐藏该元素。

3

我有一个元素在一个带有overflow: scroll属性的容器内。这很好，但是我想要的是，当元素滚动时，一旦元素超出其“祖父”容器的顶部，整个元素就会隐藏，而不是像通常一样被裁剪。

之前，我已经让一个元素在滚动窗口时隐藏/显示过了，但实际上我想要的是，在我滚动它所在容器内的元素（以及当它溢出祖父容器时）时，隐藏/显示该元素，而不是在我滚动窗口时。

jQuery

$(document).scroll(function () {

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

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

});

据我了解，在jQuery中，如果一个元素已经设置了overflow:scroll属性，那么尝试滚动该元素会有问题，而且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没有任何作用，因为我已经试过很多次，现在它甚至不能在窗口滚动时隐藏。非常感谢您的帮助。

- kahlo

您将滚动应用于文档而不是元素，因此不会发生任何事情。 - Temani Afif

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Andy Hoffman · Answer 1

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

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

注意：我从您原来的 CSS 中更改了一件事情。我使用 padding-top 代替 margin-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/