Blogger Book

Qualche tempo fa, abbiamo visto come aggiungere pulsanti di condivisione che si fermano e fluttuano mentre si scorre la pagina verso il basso . Questa volta, utilizzando lo stesso script, otterremo lo stesso effetto con il gadget Pagine. Questo codice fa sì che il gadget Pagine si fermi e rimanga visibile mentre si scorre la pagina verso il basso , per poi tornare alla sua posizione originale mentre si scorre di nuovo verso l'alto. Potete vederlo funzionare
in questo blog di prova ; scorrete la pagina verso l'alto e verso il basso per vedere come si comporta il menu.

Per inserirlo nel tuo blog, vai su Modello | Modifica HTML e incolla quanto segue prima di </head> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>
<script>
//<![CDATA[
$(function() {
var $floatMenu = $(" #PageList1 "),
$window = $(window),
offset = $floatMenu.offset();
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$floatMenu.css({'posizione' : 'fissa', 'larghezza' : ' 880px ', 'superiore' : '0px'});
} else {
$floatMenu.css({'posizione' : 'relativa', 'superiore' : 'auto'});
}
}
);
//]]>
</script>
<style>
#PageList1 {
width: 880px; /* Larghezza del gadget Pagine */
background:#fff; /* Colore di sfondo del gadget */
z-index: 99;
}
</style>

Cosa dovresti tenere a mente se decidi di utilizzarlo?

Se hai già jQuery, ometti la prima riga in grigio. Se invece usi Scriptaculous/Prototype, dovrai apportare alcune modifiche .

Il testo in rosso è l'ID del gadget Pages, quindi assicurati che il tuo ID gadget corrisponda a quello mostrato nel codice, poiché a volte può essere #PageList2 , #PageList3 , ecc. In tal caso, sostituisci semplicemente il testo in rosso con il tuo ID effettivo.

Puoi utilizzarlo anche con qualsiasi altro menu; ti basterà sostituire ciò che è in rosso con l'ID del tuo menu, anche se probabilmente dovrai aggiungere alcuni stili extra sotto <style>.

L' area blu imposta la larghezza del gadget. Se è troppo stretta o troppo larga, è lì che dovrai regolarla.

Se utilizzi il modello Fantastic, SA (Awesome Inc.) , saprai che il menu copre l'intera larghezza dello schermo, quindi chi utilizza quel modello dovrebbe usare questo codice invece di quello precedente:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>
<script>
//<![CDATA[
$(function() {
var $floatMenu = $(".tabs-outer"),
$window = $(window),
offset = $floatMenu.offset();
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$floatMenu.css({'posizione' : 'fissa', 'larghezza' : '100%', 'superiore' : '0px'});
} else {
$floatMenu.css({'posizione' : 'relativa', 'superiore' : 'auto'});
}
}
);
//]]>
</script>
<style>
.tabs-outer {
width:100%;
background: url(http://www.blogblog.com/1kt/awesomeinc/tabs_gradient_groovy.png) repeat scroll 0px 0px #000 ; /* Colore di sfondo */
z-index: 99;
}
</style>

In questo caso, non è necessario verificare l'ID del gadget o modificarne la larghezza, ma se necessario, è possibile modificare il colore dello sfondo modificando ciò che è in grassetto.

Come puoi vedere, l'installazione è un unico passaggio e non c'è altro da fare se non modificare alcuni stili se necessario; il risultato, oltre a essere molto accattivante, può essere molto pratico per i tuoi visitatori e per te, soprattutto se vuoi che i tuoi lettori abbiano sempre visibili e facilmente accessibili i link del tuo menu.

fonte