WebSite X5Help Center

 
Gaetano D.
Gaetano D.
User

Colore Stickybar  it

Author: Gaetano D.
Visited 1147, 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
6 ANSWERS - 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

Read more
Posted on the from 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.

Read more
Posted on the from 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

Read more
Posted on the from Giuseppe Guida
Gaetano D.
Gaetano D.
User
Author
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?

Read more
Posted on the from 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

Read more
Posted on the from Giuseppe Guida
Giuseppe Guida
Giuseppe Guida
User

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

Read more
Posted on the from Giuseppe Guida