Question

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

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

jQuery

$(document).scroll(function () {

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

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

});

所以我的理解是，当一个元素已经溢出时，尝试在jQuery中执行此操作会出现问题：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并没有做任何事情，因为我已经玩了很多，现在它甚至没有隐藏在窗口滚动中。非常感谢您的帮助。

Answer 1

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

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

注意：我从您原来的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>

position

编辑：

要使该框向下滚动后重新出现，您需要跟踪父元素-在您的情况下为.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/7wcL46k0/2/

滚动到容器顶部后，将其隐藏

1 个答案: