Fixa (que roman estàtica a la finestra de desplaçament) Els blocs de la pàgina utilitzant només CSS

Aquest missatge pot ser un bon exemple de la frase "l'àvia ensenyament a xuclar els ous" ... Perquè això és una cosa de CSS només BASIC. Però per a aquells, com l'inconscient de mi, això podria ser una benedicció disfressada. Sempre he pensat (que podria perdre la meva feina per dir això), només era possible per mantenir alguna part del contingut de la pàgina HTML estàtic (és a dir, la seva posició es mantingui com està a la finestra de desplaçament), amb algunes seqüències d'ordres intel · ligents, fer tots els científics càlculs per trobar la posició dinàmica, atrapant als esdeveniments i l'establiment de temps d'espera Window.scroll etc

Mai vaig pensar que podria tan simple com això .... Aquí, al següent CSS / HTML, tinc quatre blocs estàtics, un fixat a cada un extrimities de la pàgina, dalt, dreta, baix i d'esquerra ... no cal dir ... vostè pot triar un o més si cal ...

CSS
. Estàtica {display: block; z-index: 10; color: # ffffff; overflow-x: hidden; overflow-i: hidden; posició: ixed;
}
# Contents {margin: 0px 100px 150px 160px; border: 1px solid # e6e6e6}

# Wrap-t {top: 0px; background: # 33CC66; width: 100%; alçada: 55px;}

# Wrap-l {top: 80px; fons: # FF9966; alçada: 300px; ample: 150px; la frontera: 2px solid # e6e6e6;}

# Wrap-b {part inferior: 0px; background: # 3333CC; width: 100%; alçada: 55px;}

# Wrap-r {top: 80px; fons: # 6666FF; alçada: 300px; ample: 140px; la frontera: 2px solid # e6e6e6; dreta: 0;}

HTML
id = "contents"> <div You contingut de la pàgina principal </ div>
<div id="wrap-b" class="static">
Contingut estàtic en el fons de la pàgina
</ Div>
<div id="wrap-t" class="static">
El contingut estàtic en principi
</ Div>

<div id="wrap-l" class="static">
Contingut estàtic a la pàgina a l'esquerra
</ Div>
<div id="wrap-r" class="static">
Contingut estàtic sobre el dret de la pàgina
</ Div>

Vegi un exemple aquí wroking


Deixa un comentari

NDK a casa | Expressant IT | Boca Expressant | Penmenship Expressant | Awe Expressant | expressar-me