Problema coordinamento header alternativi e funzione JS

[ivanisevic82]

Ciao a tutti, ho un problema che spero possiate aiutarmi a risolvere.

Nel tema che sto realizzando (da zero, non modificando temi di terzi) su wordpress, vorrei che ci fosse una immagine di sfondo dell'header differente, a seconda della pagina in cui ci si trova.

Per fare ciò ho adottato il seguente sistema:

<?php if(is_page(XXX)) {
 get_header('YYY');
}
else {
 get_header();
}
 wp_head();
?>

Ovviamente il sistema funziona caricando in wordpress anche il file "header-yyy.php", che contiene le modifiche necessarie.

Preciso che la modifica consiste semplicemente in una cambio di classe, attribuita al tag "header".

A esempio, al posto di:

<header class="header">

ci sarà

<header class="YYY">

Fin qua tutto chiaro e tutto funzionate.

Il problema sorge in quanto ho implementato un'altra funzione (questa volta mediante JS), grazie alla quale (in TUTTE le pagine, a prescindere dall'header applicato), allo scorrimento del mouse la navbar (ovverosia il menu) cambia colore, mediante l'aggiunta di una classe al contenitore della navbar (che è un DIV presente all'interno dell'header).

Per capirci meglio, questo è il codice JS

var className = "inverted";var scrollTrigger = 60;


window.onscroll = function() {
  // We add pageYOffset for compatibility with IE.
  if (window.scrollY >= scrollTrigger || window.pageYOffset >= scrollTrigger) {
    document.querySelector('#header_container_sfondo').classList.add(className);
        } else {
    document.querySelector('#header_container_sfondo').classList.remove(className);
  }
};

Grazie a questa funzione, allo scorrimento del mouse, viene aggiunta al div "#header_container_sfondo" (che sta appena sotto ed all'interno del tag "header"), la classe ".inverted".

Venendo al dunque, la predetta funzione (aggiunta di classe) opera correttamente SOLO E SOLTANTO nelle pagine in cui il sistema utilizza il file "header.php" di base.

In TUTTE le pagine in cui usa un header alternativo (ad es. "header-yyy.php"), la classe ".inverted" non viene più aggiunta al div "#header_container_sfondo".

Evidenzio infine che ho provato ad inserire il "header-yyy.php" il medesimo identico contenuto di "header.php", ma nemmeno così funziona.

In altre parole il JS (con la conseguente aggiunta della classe ".inverted" opera SOLTANTO se wordpress utilizza il fine "header.php", a prendere dal suo contenuto (in quanto, a parità di contenuto, con "header-yyy-php" non funziona.

Spero di essere stato chiaro.

Grazie sin d'ora a chi vorrà e potrà darmi una mano!


PS - EDIT: ho pensato che forse un modo per risolvere alla radice potrebbe essere NON utilizzare un nuovo file PHP per ogni header, ma modificare la "condizione", rendendola (nella sostanza), qualcosa del genere:

"Se non nella pagina YYY, aggiungi al tag header la classe YYY".

E' possibile creare questa regola e semplificarmi la vita??