时间戳

首页 > 解决方案 > 滚动到容器顶部后隐藏元素

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

问题描述

我在容器中有一个元素，带有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 没有做任何事情，因为我已经玩了这么多，现在它甚至没有隐藏在窗口滚动上。我真的很感激任何帮助。

标签： jqueryhtmlcsswebkit-overflow-scrolling

解决方案

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

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

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

推荐阅读