Colore Stickybar 
Author: Gaetano D.
Visited 1079,
Followers 4,
Shared 0
Come posso cambiare il colore di sfondo della stickybar con lo scorrimento della pagina? Vorrei che partisse dal colore trasparente e con lo scorrimento cambiasse il colore.
Posted on the
Buongiorno. Devi creare l'header, che compaia in alto, e poi la bar con le stesse caratteristiche, ma con lo sfondo in trasparenza.
Buon lavoro,
Letizia
Devi utilizzare del codice extra per l'effetto che vuoi realizzare tu, io l'ho realizzato nel mio sito (sempre che abbia capito bene quel che intendi), l'esempio è questo:
http://www.ggwebdesign.altervista.org/
Scorri lentamente la pagina verso il basso, appare la sticky bar con sfondo trasparente e man mano che scorri lo sfondo diventa solido e di colore blu.
Il codice CSS, usando i tasti Ctrl+U, è tutto visibile nel sorgente della mia pagina, compreso lo script.
P.S. devi mettere a zero l'header e non devi inserire nessun menù di navigazione nell'header, usa solo la sticky bar con il menù di navigazione e con il codice che vedi nel sorgente della mia pagina.
Ciao
Author
Si è esattamente questo l'effetto che vorrei creare. Sarebbe possibile allegare i file esatti da inserire su x5?
Ciao.
Nel progetto metti l'Header a ZERO al PASSO 2 Modello / Struttura del Modello (mettilo a ZERO a tutte le risoluzioni, dalla desktop a quella mobile).
POi attiva la Sticky Bar sempre al PASSO 2 Modello / Sticky Bar e metti lo sfondo su "trasparente" per tutte le risoluzioni, assegna un valore di altezza che vuoi alla sticky bar, nel mio progetto è 70px.
Poi al PASSO 1 Impostazioni / Statistiche e Codice / Codice / Codice Personalizzato / Prima della Chiusura del Tag HEAD inserisci questo:
<style>
#imStickyBarGraphics {
transition: 1s!important;
}
#imStickyBarContainer {
transition: 1s!important;
}
#imStickyBarGraphics.myStickyBar {
background: rgba(8, 69, 126, 1) !important;
opacity: 1 !important;
}
</style>
<script>
$(document).scroll(function() {
if ($(this).scrollTop() > 150) {
$('#imStickyBarGraphics').addClass('myStickyBar');
} else {
$('#imStickyBarGraphics').removeClass('myStickyBar');
}
});
</script>
N.B. il colore dello sfondo della sticky bar puoi modificarlo variando i valori di questa stringa rgba(8, 69, 126, 1) che trovi all'interno del codice CSS postato sopra.
Credo sia tutto.
Ciao
P.S. Fammi sapere poi se ci sei riuscito. Ciao