How to hide a fixed element if outside of it's parent element's height?

Question

I'd like to know how I can hide the .fixedElement that is within the .entry-content not allowing it to show over the .header(blue section) or .footer(green section), once the .fixedElement reaches top/bottom of it's parent element it hides it.

http://jsfiddle.net/cafgnzj3/

I learned that fixed elements does not behave within it's parent element css styles because it is based on the viewport of the browser.

I thought it would be a lot easier to create an example.

I'd give javascript a go as well, if possible to know the function that does it.

Answer 1

Probably the easiest way is to make .the_content an absolute element and then use z-index like this:

.fixedElement { position: fixed; z-index: 1; }
.the_content { position: absolute; z-index: 2; }

If .the_content is dynamic, adjust its height and position in Javascript.

It's easier to adjust height and position in Javascript than achieving this very effect in it.

Answer 2

parent css : {overflow:hidden;}

edit: specifically :

<div class='some-tough-edges'>buncho stuffs</div>

.some-tough-edges { width: yourchoice; height: yourchoice; overflow: hidden; //display: block; if not using a block element }

edit2 : don't use fixed within the overflow, fixed position the container, and absolute or relative within it