Header e Menù bloccati in alto durante lo scorrimento pagina
Autor: Nadia L.
Visited 9097,
Followers 1,
Udostępniony 0
Ciao a tutti,
vorrei bloccare header e menù in alto nella pagine come questo sito:
http://www.mibo.altervista.org/menufisso/
Il sito su cui devo farlo è:
http://www.simonenepoteandre.it
ho inoltre inserito una header diversa per ogni pagina.
Grazie mille a chiunque mi dia info!! :)
Nadia
Posted on the
il codice da inserire al passo 1, tab. esperto
<style type="text/css">
body #imFooter {position: fixed; bottom: 0; width: 960px; z-index:1000;}
body #imHeader {position: fixed; top: 0; width: 960px; z-index:1000;}
body #imMnMn {position: fixed; top: 150px; left:auto;}
</style>
personalizza i valori e cancella l'elemento o gli elementi che non vuoi mantenere fissi...
qui un suggerimento concreto
http://www.essedi.altervista.org/menufisso/
Buongiorno Nadia,
prova a seguire le indicazione di Skeggia e Silver e se hai difficoltà o hai bisogno di chiarimenti o se vuoi comunicarci che hai risolto, puoi scrivere un messagio qui.
Grazie.
Autor
Grazie mille! Per Header e Menù ce l'ho fatta! :)
Ma ho visto che sarebbe più funzionale bloccare solo il menù, che però vorrei mantenere sotto l'header.. ma se ovviamente gli do un top mi rimane bloccato a mezza pagina...
ci sono soluzioni?
seecondo me, bloccare solo il menu, non è un risultato esteticamente gradevole, o blocchi anche l'header o nessuno dei due... io li terrei bloccati entrambi...ma è un mio pensiero...
se ho capito ciò che vuoi fare allora lo fa il programma stesso,
al passo 4 --> menu principale --> spunta la voce "scorrimento automatico del menu".
con la vesione 9 che hai fa un po' effetto tira e molla, non è piacevolissimo...
in alternativa (togli la spunta quindi) puoi inserire al passo 1 scheda esperto sezione head questo script
<script>
$(window).scroll(function(){
var h= $(this).scrollTop();
if (h >200){
$('#imMnMn').css({
'top': '0px',
'position': 'fixed',
'left': 'auto'
}
);
}
else{
$('#imMnMn').css({
'top': '200px',
'position': 'absolute',
'left': '0'
});
}
});
</script>
sostituendo al valore 200 l'altezza del tuo header (in entrambe le posizioni).