[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;
}

[adottauncane2]

Comunque devo essermi spiegato male..quando dico che devo cambiare il colore del logo intedevo dire che cambio proprio l'immagine del logo.
Nel senso che io come logo ho caricato un'immagine colorata..e quando scrollo l'immagine coloroata viene sostituita con un'immagine uguale ma tutta bianca.

[Limma]

Comunque devo essermi spiegato male...

Un po' sì, un po' no... 

Nei miei post precedenti avevo comunque specificato bene che avevo modificato il logo nella visualizzazione da mobile, ma esclusivamente in formato testo,
Per fare quello che chiedi tu - quindi cambiare l'"immagine-logo" allo scroll della pagina bisogna nell'ordine:
- modificare il file tempateDetails.xml
- modificare il file logo.php
- aggiungere una nuova serie di regole css

Il punto è che la documentazione in merito sul sito di Joomshaper è nulla, e anche nel forum non si trova praticamente nulla. Si potrebbe provare a chiedere sul forum di Joomshaper, ma bisogna avere una sottoscrizione a pagamento per postare.

Chiudo qui i miei interventi in merito alla questione, ma sono sufficientemente soddisfatto dei css che ho elaborato per le modifiche degli header di Helix 3...! 

[adottauncane2]

risolto

1.ho creato un mio modulo custom e messo al posto di "logo"
2 ho creato delle classi che con un background url si prendono il logo una per il logo bianco e una per quello verde. Le classi le ho associate al mio modulo custom.
3l modificando il file mainjs aggiungo e rimuovo le regole css dal mio  modulo custom in base allo scrolling.

[Limma]

Ottima soluzione! 

La via attraverso il file logo.php era stata suggerita dagli stessi sviluppatori di Helix3.

Puoi condividere le modifiche al file main.js?

[adottauncane2]

Ho preso spunto dalla logica della prima funzione e ne ho creata una simile ma con le classi da me create nel css.
Occhio alle variabili; in velocità le ho rinominate solamente aggiungendo un 2 alla fine del nome di ciascuna variabile.

Codice: [Seleziona]

// if sticky header
    if ($("body.sticky-header").length > 0) {
        var fixedSection = $('#sp-header');
        // sticky nav
        var headerHeight = fixedSection.outerHeight();
        var stickyNavTop = fixedSection.offset().top;
        fixedSection.addClass('animated');
        fixedSection.before('<div class="nav-placeholder"></div>');
        $('.nav-placeholder').height('inherit');
        //add class
        fixedSection.addClass('menu-fixed-out');
        var stickyNav = function () {
            var scrollTop = $(window).scrollTop();
            if (scrollTop > stickyNavTop) {
                fixedSection.removeClass('menu-fixed-out').addClass('menu-fixed');
                $('.nav-placeholder').height(headerHeight);
            } else {
                if (fixedSection.hasClass('menu-fixed')) {
                    fixedSection.removeClass('menu-fixed').addClass('menu-fixed-out');
                    $('.nav-placeholder').height('inherit');
                }
            }
        };
        stickyNav();
        $(window).scroll(function () {
            stickyNav();
        });
    }
   
    // change logo // modificato da adottauncane2 volendo posso incorporare questa funzione con quella sopra per ottimizzare
    if ($("body.sticky-header").length > 0) {   
        var changeLog = $('#sp-miologo');
        changeLog.addClass('logoWhite');
        // sticky nav
        var headerHeight2 = changeLog.outerHeight();
        var stickyNavTop2 = changeLog.offset().top;
        //add class
        //fixedSection.addClass('menu-fixed-out');
        var stickyNav2 = function () {
            var scrollTop = $(window).scrollTop();
            if (scrollTop > stickyNavTop2) {
                changeLog.removeClass('logoWhite').addClass('logoGreen');
                $('.nav-placeholder').height(headerHeight);
            } else {
                if (changeLog.hasClass('logoGreen')) {
                    changeLog.removeClass('logoGreen').addClass('logoWhite');
                    $('.nav-placeholder').height('inherit');
                }
            }
        };
        stickyNav2();
        $(window).scroll(function () {
            stickyNav2();
        });
    }

[Limma]

Grazie per la condivisione! 

[adottauncane2]

Grazie per la condivisione! 

  Grazie a voi per l'aiuto.