Header 2

In questa pagina l'header viene nascosto allo scroll down della pagina, e ricompare allo scroll up.

L'effetto funziona molto bene, ma ho dovuto disabilitare la top bar con icone social e informazioni di contatto; mi dava problemi di visualizzazione che non sono riuscito a risolvere al momento.

Per tale effetto occorrono fondamentalmente una regola css e un piccolo codice Java Script.

Questa la regola css:

#sp-header {
position: fixed; 
transition: all ease-out 0.5s; 
-webkit-transition: all ease-out 0.5s; }

Questo lo script:

/* When the user scrolls down, hide the navbar. When the user scrolls up, show the navbar */
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("navbar").style.top = "0";
  } else {
    document.getElementById("navbar").style.top = "-90px";
  }
  prevScrollpos = currentScrollPos;
}

In realtà ho dovuto utilizzare anche una seconda regola css per imporre un margin-top alla posizione modulo "Title" per ovviare a problemi di visualizzazione dell'immagine inserita nel modulo che, al diminuire della risoluzione orizzontale, si "assottgliava" sempre più, o, per essere più precisi, veniva progressivamente nascosta dall'header.
Questa la nuova regola css (notare che il margin top imposto ora corrisponde esattamente al valore "height" dell'header che è pari a 60px):

#sp-title { 
min-height: 0; 
margin-top: 60px; 
}


Stampa   Email