Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by jamied
jamied
14,467 Points

Text Disappear under Translucent Header?

Background: I'm building a relatively simple site and I'm using an Image as the entire site background. I've made a sticky nav using flexbox with a header image.

What I want: I'm looking for a way to have any text in the wrapper div essentially disappear upon scrolling once it hits the border of the translucent Header. In it's current state, text is visible underneath the header upon scrolling.

Why a translucent header? I want to keep the header translucent so that the background image can be seen at all times.

My research so far: I've found some guidance and individuals who have accomplished this by 1) giving the header a height value 2)setting the overflow-y to auto and 3) giving the wrapper div a margin top = to the header height.

See discussion here: http://stackoverflow.com/questions/6529421/hide-scrollable-content-behind-transparent-fixed-position-divs-when-scrolling-th

AND a live jsfiddle example here: http://jsfiddle.net/8SUmn/3/

Added curveball - when throwing in the properties from the posted jsfiddle, I lose the whitespace margin created by flexbox that keeps my footer at the bottom of the viewport.

Can anyone spot what I might be doing wrong?

Here is my code snapshot (currently mobile only): https://w.trhou.se/mndpy9ghaa

Thanks in advance!

1 Answer

Steven Parker
Steven Parker
230,274 Points
Steven Parker
Steven Parker
230,274 Points

I didn't see anything that might scroll in the workspace.

But if you want something fixed on the screen, you probably don't want to include it in a flexbox. In fact, why not just do it like in the JSFiddle example, with fixed and absolute positioning? Keep your footer at the bottom with positioning also (but relative to the bottom).

If you need one for other reasons, you can still have a flexbox in the area between the fixed elements.

jamied
jamied
14,467 Points

Ya know... I didn't even think of that. I had already had it in my head that the entire page would be flexed for easier scaling later on without even realizing i could just flex the middle.

Thanks so much for your input - I'll rebuild and flex the middle for those elements later on.