Pubblicato il 04/08/17 - aggiornato il  | 2 commenti :

Come rendere flottante l'Header di Blogger per desktop e/o mobile.

Come lasciare sempre visibile l'Intestazione o Header di Blogger quando si scorre la pagina verso il basso per il desktop e/o per il mobile.
Recentemente ho ricevuto molti commenti su una personalizzazione che avevo presentato diverso tempo fa per tenere sempre in primo piano un widget quando si scrolla la pagina verso il basso.

Per inserire questa funzionalità dobbiamo aggiungere nel modello un javascript che sia funzione dell'ID del widget da tenere sempre in primo piano.

Mi è stato chiesto se sia possibile rendere flottanti contemporaneamente due o più widget. Questo in teoria è possibile quando la posizione orizzontale dei widget non sia sovrapponibile vale a dire per esempio se un widget si trova nella sidebar di sinistra e uno si trova nella sidebar di destra.

Se invece sono nella stessa sidebar quando si scorre la pagina andranno a posizionarsi uno sopra all'altro. Non è infatti possibile impostare una distanza dal top della pagina che sia diversa da 0.





Nei commenti a quello stesso post mi è stato anche chiesto se sia possibile rendere flottanti il menù e l'Intestazione o Header. Per quello che riguarda i menù non si può dare una risposta complessiva vista la estrema varietà dei codici usati per gli stessi menù.

Ho comunque già presentato un menù flottante e responsive per Blogger che penso possa essere usato da chi abbia questa esigenza. È invece possibilissimo rendere flottante l'Header di Blogger e lo si può rendere tale solo per la versione mobile, solo per la versione desktop o per entrambe le versioni.






LASCIARE L'INTESTAZIONE DI BLOGGER SEMPRE IN PRIMO PIANO


L'ID dell'elemento pagina Header di Blogger è Header1 quindi utilizzando il codice del post linkato all'inizio e adattandolo alla Intestazione questo diventa in questo modo:

<!-- Widget Flottante Inizio -->
<script>
//<![CDATA[
wid_float("Header1");
function wid_float(elem) {
     var pin_wid = document.getElementById(elem);
     var scrollee = document.createElement("div");
     pin_wid.parentNode.insertBefore(scrollee, pin_wid);
     var width = pin_wid.offsetWidth;
     var iniClass = pin_wid.className + ' pin_wid';
     window.addEventListener('scroll', float_pin, false);
     function float_pin() {
         var rect = scrollee.getBoundingClientRect();
         if (rect.top < 0) {
             pin_wid.className = iniClass + ' float_pin';
             pin_wid.style.width = width + "px";
         } else {
             pin_wid.className = iniClass;
         }
     }
}
//]]>
</script>
<style>
.float_pin {background:#FFF !important; position:fixed !important; top:0; z-index:99999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.2); margin-top: 0; position:relative\9 !important;}
</style>
<!-- Widget Flottante Fine -->





Tale codice va incollato su Tema -> Modifica HTML subito sopra alla riga </body>. Si possono fare solo modifiche molto limitate. In basso si può scegliere il codice del colore dello sfondo del widget quando diventa fluttuante. In quel caso viene aggiunta anche una ombreggiatura con la riga di codice colorata di blu e che può essere cancellata o personalizzata nella quantità di trasparenza e nei codici dei colori della terna RGB.

header-flottante

Dopo aver salvato il Tema la Intestazione rimarrà sempre visibile quando si scorre la pagina verso il basso. Se in Tema -> Cellulare -> Ruota dentata si è messo la spunta su Sì. Mostra la versione mobile del tema sui dispositivi mobili e tra i temi disponibili si è scelto Personalizza, l'Intestazione di Blogger sarà flottante anche quando il sito viene aperto con un dispositivo mobile

header-flottante-mobile

Questa soluzione può piacere o non piacere. Possiamo comunque decidere di mostrare l'Header fluttuante solo per il desktop o addirittura mostrarlo fluttuante solo per il mobile. In entrambi i casi il codice precedente va inserito tra due righe di codice dei tag condizionali che introducono dei vincoli. La seconda riga è in entrambi i casi </b:if> che indica la fine della condizione mentre la prima riga deve essere

<b:if cond='!data:blog.isMobile'> per rendere flottante l'Header solo per il desktop

<b:if cond='data:blog.isMobile'> per rendere flottante l'Header solo per il mobile.




2 commenti :

  1. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  2. Visto che l'idea non era male :-) col menù orizzontale è perfetto, grazie.

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.