Ciao a tutti. Sul mio sito son riuscito a fare in modo che la barra del menù di navigazione (quella nera sotto l'immagine di testa contenente le voci "Info - Preferiti - Contatti") a un certo punto dello scrolling acquistasse la proprietà "position:fixed;" e apparisse in testa al sito sempre visibile. E' bastato un piccolo script, nulla di complicato. E fin qui tutto bene.
Essendo il mio sito responsive, salvo rare eccezioni ha le misure espresse in percentuale. Perciò, una volta che il menù scappa dalla sua posizione originaria e si va a piazzare fisso in alto, mi vedo costretto a ridefinirne la larghezza in questo modo:
codice:.topfixed{position:fixed;top:0;width:90%;max-width:1160px;z-index:1;}
dove 90% è la larghezza del container giallo (il restante 10% è costituito dai bordi rossi) e 1160px è la larghezza massima in pixels che raggiunge il sito. Se non specifico il max-width, a risoluzioni schermo più elevate la banda nera sborda dal contenuto giallo. Così invece torna tutto a posto a tutte le risoluzioni. Più o meno.
Dico più o meno perché la cosa funziona perfettamente su IE, su Firefox e su Chrome. Opera invece mostra un divario di un pixels e non riesco a capire perché:
Esempio (cliccate poi sulla foto per visualizzarla alle giuste dimensioni)
Nulla di devastante, come potete vedere, ma se esistesse un modo più efficace di far combaciare la banda nera con il content a tutte le risoluzioni sarebbe perfetto. vi viene in mente qualcosa?
Grazie in anticipo.
Rispondi quotando
