CSS masters please...
CSS masters please...
Out of context: Reply #10
- Started
- Last post
- 27 Responses
- mg330
Trying to figure something out and unfortunately stumped.
I want to have the header shown below fixed on the page so it doesn't scroll. I then want the text below it to scroll on page scroll, but disappear once it hits that div containing the header. I've been messing with overflow, setting a fixed height, etc.
I've been messing around with this here: https://codepen.io/mgee/pen/xmxy…
- header should remain fixed
- text should scroll and disappear behind header as it scrolls upwards
- scrolling anywhere on the page should scroll that content - no scroll bar for that text section as used in overflow:scroll.Can anyone offer a hand with this?
- you can't have events with css. To achieve that you would need js. Bootstrap has something called "affix", which is the easiest way to get that up and running.mekk
- another solution would be to have the title fixed and the text overlapping it (same as you have it right now, just with background for text)mekk
- https://codepen.io/a…sted
- Not sure quite what you mean... not this?
https://codepen.io/a…kingsteven - https://codepen.io/p…mekk
- ah thats nice one mekk :)sted
- oh, i think i see what you're doing with the background image... you can maybe try background-attachmen... ??
https://codepen.io/a…kingsteven - * background - attachment : fixed;
tidier version:
https://codepen.io/a…kingsteven - keep in mind it will only work with one heading/text. all fixed elements with top: 0; are on top of each other.mekk
- Whoa! Damn, thanks for all the quick responses.mg33
- kingsteven - that's exactly what I needed. Thank you!mg33
- Actually... now that I look more, that white background on the fixed header is how it's doing it. I need it to be transparent and the scroll disappear behind itmg33
- background-color: rgba(255,255,255,.5...mekk