[RISOLTO]Header e scrollup?

[adottauncane2]

Vorrei che il mio header cambiasse colore del burger menu e del logo quando si effettua uno scrollup ma non so come farlo.. non conosco la logica che sta dietro a questo effetto.
Avete qualche idea?
Grazie.

[giusebos]

qualche lin/sito con questo effetto?

[adottauncane2]

qualche lin/sito con questo effetto?

https://www.codeply.com/go/xp2fY6sVHP

[giusebos]

l'effetto sulla parola brand?

[adottauncane2]

Intendo l'effetto su tutto l'header che all'inizio è trasparente è poi diventa con sfondo nero.
Io attualmente ho un header che contiene un burger menu, un logo caricato tramite il backend , e un bottone.
Quando scrollo verso il basso vorrei che il burger menu cambi colore e il logo cambi colore ( immagino che io lo possa fare in modo di caricare un logo di colore diverso).
 

ecco un'altro esempio https://www.astercucine.it/

[giusebos]

ok quell'effetto e la combinazione di html e css, e la puoi vedere bene nel primo sito dove il codice, sia html che css è ben visibile in quanto si tratta di un sito per sviluppatori.


In questo sito vengono utilizzate le classi di bootstrap, che vengono applicate alla sezione dove vuoi applicare l'effetto dell'effetto, inizia con il controllare se il tuo template usa bootstrap, sarà più semplice applicare l'effetto, poi controlla il codice nel file index.php che dovrà avere quel "castelletto" di div...


Inutile dirti che se non sai niente di html e css fai prima a cercare una persona che sia disponibile a farlo l postotuo.

[adottauncane2]

bootstrap  lo sto gia usando sul sito.

[giusebos]

ottimo, analizza la pagina con il link ricostruendo la gerarchia dei div dentro il tuo fle index.php del template......ammesso che usi un template standard e non un framework, per quest'ultima possibilità le cose cambiano e non poco.

[adottauncane2]

Hai ragione mi sono dimenticato di dire che sto usando helix3

[giusebos]

non conosco helix.


Comunque la direzione è quella, devi capire in quale file ricreare la struttura dei div dove verranno applicare le regole del css.


fai attenzione che è anche possibile che qualche regola css vada modificata.

[adottauncane2]

si sto notando che con firebug quando scrollo all'interno di alcuni div si aggiungono e tolgono alcune regole css.
Per ora sono riuscito a cambiare lo sfondo ma non sono ancora riuscito a capire come cambiare l'immagine e il colore del burger menu...ho notato che
scrollando non si modificano le regole all'interno dei suddetti div.Che ci sia del js da modificare?

[giusebos]

no è tutto css

[adottauncane2]

Chiedo scusa ma come fa tutto il sistema a capire quando modificare gli stili all'interno dei div?Dico..ci sarà pure una logica? Non riesco a capire
grazie a quale magia muovendo la rotellina del mouse gli stili possano cambiare all'internodei div.

[giusebos]

nella pagina
https://www.codeply.com/go/xp2fY6sVHP
prova a giocare con il codice e premi run
prova a cambiare il valora su

Codice: [Seleziona]

<div class="navbar navbar-inverse navbar-fixed-top" data-spy="affix" data-offset-top="400">

data-offset-top="400"

vedrai intanto che l'effetto funzionerà prima o dopo secondo cosa inserirai
poi leggiti le regole successive e capirai

Ora non tempo per farti una lezione completa, ma quella pagina vale mille parole.

[adottauncane2]

1000 grazie 

[Limma]

Non ti sarò di molto aiuto perchè l'esempio che tra poco ti linko è realizzato su un template che utilizza il T3 framework, ma giusto per dire che ciò che vedrai è stato fatto con poche regole css che modificano il colore del menu sandwich e dell'header nella visualizzazione mobile allo scroll della pagina.

link

Non ho ancora provato con Helix 3, ma credo e spero non sia affatto più difficile...! 

[adottauncane2]

Mi sa che il cuore della questione sta tutto nel file main.js
Ho notato che li dentro che uno script che un base allo scroll aggiunge o toglie delle regole dai div.

[Limma]

Ho ripreso in mano il sito con Helix 3 che ti avevo già linkato altrove e ho fatto una prova per modificare colore dell'header e del burger menu (offcanvas toggler) allo scroll della pagina.
Ho anche fatto in modo che cambiasse il colore del logo, ma io ho usato il logo in formato testo.
Va da sé che per fare tutto ciò ho usato solo regole css e mediaqueries.

link

Lo metto online per un po'; quando l'hai visto lo rimetto offline.

[adottauncane2]

ok le modifiche a menu-fixed ed menu-fixed-out sono chiare.
La questione del logo è meno chiara inquanto anche se nel front end vedo che le modifiche grafiche avvengono , in firebug non vedo codice che viene evidenziato in arancione.

[Limma]

La questione del logo è meno chiara inquanto anche se nel front end vedo che le modifiche grafiche avvengono , in firebug non vedo codice che viene evidenziato in arancione.

Non capisco bene cosa vuoi dire con "codice che viene evidenziato in arancione", ma non importa.
Da Firebug dovresti comunque avere accesso all'intero file custom.css (file che puoi aprire anche dal sorgente della pagina) che contiene le regole sul cambio di colore del logo testuale, regole che ti riporto qui:

Codice: [Seleziona]

@media screen and (max-width: 991px) {
    #sp-header .logo a {
        color: green !important;
    }
}
@media only screen and (max-width: 991px) {
#sp-header.menu-fixed .logo a {
   color: white !important;
}