Linked Questions

Popular Questions

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.

Related Questions