Dieses Theme ist ein modernes FSE-Theme. Du musst dazu eigentlich keinen Quellcode schreiben um etwas anzupassen. Die Hintergrundfarbe vom Header solltest Du über den Editor anpassen können. Die Theme-Entwickler stellen dazu auch eine Dokumentation bereit: https://www.wpzoom.com/docs/how-to-customize-the-header-in-wordpress-full-site-editor/
Thread-Starter
mod4ps
(@mod4ps)
Hallo Threadi
Ich habe offenbar mein Anliegen zu wenig klar geschildert. Sorry!
Ich möchte das die Hintergrundfarbe (im Header) wechselt, wenn ich 100px runter scrolle.
Das ist meine Test URL:
https://project-space.modular4web.ch/uniblock/kontakt/
Das ist mein mini js Script dazu:
var header-bg = document.getElementByID('header-bg');
var oldColor = header-bg;
document.body.addEventListener('scroll', () => {
let yPosition = document.body.scrollTop;
if (yPosition > 100) {
header-bg = "teal";
}
else {
header-bg = oldColor;
}
})
Die BackgroundFarbe ist mit einem GruppenBlock im HeaderBlock definiert. Diesem GruppenBlock habe ich die ID „header-bg“ gegeben.
Die Idee wäre, dass wenn ich 100px runter scrolle, die Header Farbe von Schwarz (GruppenBlock Voreinstellung) zu „teal“ Petrol wechselt.
Leider funktioniert das Ganze nicht! Was übersehe ich?
Herzlichen Dank für deine Hilfe
Peter
Wirf einen Blick in die JavaScript-Konsole. Dort ist ein Fehler in Bezug auf deinen JavaScript-Code zu sehen. So wäre er zumindest syntaktisch richtig:
var headerbg = document.getElementByID('header-bg');
var oldColor = headerbg;
document.body.addEventListener('scroll', () => {
let yPosition = document.body.scrollTop;
if (yPosition > 100) {
headerbg = "teal";
}
else {
headerbg = oldColor;
}
})
Thread-Starter
mod4ps
(@mod4ps)
Hallo Threadi
Super, vielen Dank für den Tipp mit der Konsole. Da war ja nicht nur ein Syntax-, sondern auch ein Scriptfehler.
Das passt besser, jetzt funkts!
let header = document.getElementById('header-inner');
document.addEventListener('scroll', function() {
// Get the scroll position
let scrollPos = window.pageYOffset;
if ( scrollPos > 100 ) {
header.style.backgroundColor = "rgba(245, 40, 145, 0.8)";
} else {
header.style.backgroundColor = "rgba(15, 15, 30, 0.8)";
}
});
Bestens, nochmals vielen Dank für deine Hilfe.
Peter
