WebSite X5Help Center

 
Gaetano D.
Gaetano D.
User

Colore Stickybar  it

Auteur : Gaetano D.
Visité 1150, Followers 4, Partagé 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.

Posté le
6 RéPONSES - 1 CORRECT
Letizia I.
Letizia I.
User

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

Lire plus
Posté le de Letizia I.
Giuseppe Guida
Giuseppe Guida
User

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.

Lire plus
Posté le de Giuseppe Guida
Giuseppe Guida
Giuseppe Guida
User

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

Lire plus
Posté le de Giuseppe Guida
Gaetano D.
Gaetano D.
User
Auteur
Giuseppe Guida
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.

Si è esattamente questo l'effetto che vorrei creare. Sarebbe possibile allegare i file esatti da inserire su x5?

Lire plus
Posté le de Gaetano D.
Giuseppe Guida
Giuseppe Guida
User

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

Lire plus
Posté le de Giuseppe Guida
Giuseppe Guida
Giuseppe Guida
User

P.S. Fammi sapere poi se ci sei riuscito. Ciao

Lire plus
Posté le de Giuseppe Guida