Indhold scroll bag fixed gennemsigtig header

Tags:    css3 javascript html

Hej Udviklere.

Jeg er stødt på et problem, som jeg, selvom jeg har søgt nettet tyndt, ikke har kunnet finde en løsning på. Jeg er igang med at lave en side, hvor når man scroller, skal indholdet på siden gemme sig bag en gennemsigtig header, da baggrunden er et full screen billede kan jeg ikke bare smide en baggrund ind i header elementet.

Eksempel: http://anvo.dk/test

Som I kan se kunne jeg godt tænke mig at teksten blev gemt når den kommer op under den dashede linje, jeg har læst utallige indlæg på stackoverflow, men har ikke kunne finde en løsning, som har virket for mig.

Jeg håber at der er nogen der kan hjælpe mig i den rigtige retning, jeg vil helst have det gjort i ren CSS(3) og HTML(5) men hvis det er helt umuligt, så vil ledetråde til noget javascript der kan klare arbejdet, også være en kæmpe hjælp!

Mvh. Andreas Voss



7 svar postet i denne tråd vises herunder
2 indlæg har modtaget i alt 14 karma
Sorter efter stemmer Sorter efter dato
Det jeg har sat ind står i css feltet



Noget i den her stil ?

http://jsfiddle.net/umEu3/



Det er egentlig ret simpelt:

Du skal lave et billede til din header, som svarer til det "banner" derudgør den stiplede linie og opefter. Det ligger du så ind som din header, oven på baggrundsbilledet, så det matcher 1:1, og positionerer det absolut med css, så ikke det flytter sig.

Herefter er det blot at sørge for, at z-index på teksten er lavere end dit header billede, og voila, så er du i hus :)



Problemet er at min baggrund kan flytte sig da den er et full screen billede, det vil altså sige at hvis jeg har et billede som baggrund i headeren, vil det se mærkeligt ud hvis browseren bliver gjort bare en smule mindre.



Jeg har lige prøvet at resize dit site, og kan godt se din udfordring nu.

Jeg har ikke en umiddelbart løsning her og nu, men vender tilbage hvis jeg finder ud af noget. Helt sikkert en interesant problemstilling :)



Noget i den her stil ?

http://jsfiddle.net/umEu3/


Det er meget, meget tæt på. Kan du fortælle mig hvad det er du har gjort i forhold til min kode? Har lidt svært ved at regne den ud. :-)



Det virker! Tak Dan! ;-)



t