Hiding page content under fixed div

[justcodeit]

https://jsfiddle.net/k3tof2js/

In the example posted above, I want the page content div to hide once it reaches the fixed-positioned orange div. In other words, I want the page content div to scroll into the fixed div; not let the content scroll past the fixed div. As you can see the page content div remains visible when I scroll.

[Beverleyh]

Im not sure what you want to happen to the content box once it hits the orange header (display:none; for content doesn’t seem right to me), but have a look at the JavaScript in this article http://blog.fofwebdesign.co.uk/41-add-classes-to-an-element-when-scrolled-into-viewport

You can use it to apply a new class to the content box when it reaches the header (150px from top should do it; a combined total of the header’s height and margin-top). Then, define new styles against the new class so that the content box does whatever you want.

[Author]

Posts