Hide an element once it has scrolled to the top of its container

Question

I have an element inside a container with overflow: scroll. So that is great however, what I am wanting is for the element to scroll as it's doing, but once the element overflows the top of its -grandparents- container, I am wanting the whole element to hide, rather than be cropped as it scrolling out of view (usual functionality).

Previously I've gotten an element to hide/show when I scroll the window, however I am actually wanting the element to hide/show when I scroll the element inside of it's container (and when it overflows it's grandparents container), not when I scroll the window.

jQuery

$(document).scroll(function () {

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

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

});

So my understanding is that trying to do this is problematic in jQuery when an element already has overflow:scroll on it and scrollTop() usually only relates to scrolling the window. I can't work out how to do element.scrollTop() in a way that works. Any help would be greatly appreciated.

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;
}

Edit fiddle here http://jsfiddle.net/3cdha2sy/29/

Currently the jQuery isn't doing anything as I've played around with it so much and now it's not even hiding on window scroll. I'd really appreciate any help.

you are applying the scroll to the document and not the element, so nothing will happen — Temani Afif, Jan 31 '19 at 23:16

Andy Hoffman · Accepted Answer · 2019-02-03T21:52:40.640

You can use jQuery's position to find the relative distance between the scroll content and its parent.

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

Note: I changed one thing from your original CSS. Instead of using margin-top to create scroll content offset from the top of the parent, I'm using padding-top. This keeps the offset math uncomplicated.

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/

Edit:

For the box to reappear after scrolling back down, you need to track the parent element—in your case, .inner-container. The reason is that .scroll-content, after being hidden, no longer reports a position().top. However, .inner-container is an invisible container that is not hidden, and therefore continues reporting its 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/

@kahlo I'm glad it worked for you. Could you mark my answer as the selected answer? — Andy Hoffman, Feb 03 '19 at 20:16
oh awesome, thanks again. I'm having some issues implementing that with my project, I think because I have some Ajax issues, I have to reload the page to get it to run again.. just getting my head around that at the moment, but is this Ajax friendly? or perhaps I just have too many events in my code going on. — kahlo, Feb 04 '19 at 02:41
@kahlo The code I wrote above won't interfere at all with an Ajax request. Best of luck. — Andy Hoffman, Feb 04 '19 at 06:35

Hide an element once it has scrolled to the top of its container

1 Answers1