Accedere al Design Manager nella cartella del tema Power originale (no child).
Localizzare il file javascript pwr.js, collocato nella cartella js.
Cliccare con tasto destro e selezionare "clone to chid teme".
A questo punto il file è stato clonato in un path identico nella nostra cartella del child, permettendoci di apportare modifiche che sovrascriveranno il file originale.
Per modificare il comportamento del top menu allo scroll dell'utente, localizzare la funzione "scrollHandler()", situata alla riga 704. Da notare che a dipendenza delle specifiche versioni del tema, la sua posizione potrebbe cambiare, si suggerisce di utilizzare CTRL + F per effettuare una ricerca testuale nel file inserendo "function scrollHandler()".
La foto sotto riportata mostra la porzione di codice da cancellare, per sostituirlo con una versione estesa.
Copiare e incollare il seguente snippet di codice, a sostituzione di quello sopra riportato:
var lastScrollPos = window.scrollY;
function scrollHandler() {
var scrollPos = window.scrollY > 0 ? window.scrollY : 0;
var localTopHeaderHeight = topHeader ? pwr.vanilla.getOuterHeight(topHeader) : 0;
var bodyY = pwr.vanilla.getOffset(bodyWrapper).top;
if (burgerMenu) {
burgerMenu.style.top = '' + bodyY + 'px';
if (bodyY > 0)
burgerMenu.style.height = "calc(100% - " + burgerMenu.style.top + ");"
}
if (pwr.ui.getWindowWidth() <= 575)
localTopHeaderHeight = 0;
if (scrollPos <= localTopHeaderHeight && scrollPos >= 0) {
fixedHeader.style.top = '' + ((localTopHeaderHeight - scrollPos) + bodyY) + 'px';
fixedHeader.classList.remove('scroll');
} else {
fixedHeader.style.top = bodyY + 'px';
fixedHeader.classList.add('scroll');
}
// Check if user is scrolling up
if (scrollPos < lastScrollPos) {
console.log("User is scrolling up");
// You can perform additional actions here for upward scrolling
topHeader.style.position = 'fixed';
topHeader.style.top = '0';
topHeader.style.width = '100%';
fixedHeader.style.top = localTopHeaderHeight + bodyY + 'px';
} else {
console.log("User is scrolling down");
// Actions for downward scrolling if needed
topHeader.style.position = '';
topHeader.style.top = '';
topHeader.style.width = '';
}
// Update last scroll position
lastScrollPos = scrollPos;
}
Dopo aver pubblicato, il menu risulterà aggiornato. Se si desidera aggiungere una transizione per rendere più fluida la scomparsa e ricomparsa del menu, è suggerita l'aggiunta del seguente codice nel file child.css.
/*TOP MENU SMOOTH TRANSITION scroll up */
#pwr-header-top {
transition: top 0.3s ease, opacity 0.3s ease;
}
.scroll {
transition: top 0.3s ease;
}