ID am <nav> Tag hinzufügen
Um diese Menüleiste beim Aufruf der Seite transparent darzustellen, habe ich diese auch in den Block-Werkzeugen auf transparent gestellt.
Mit diesem JavaScript gebe ich der Menüleiste beim Scrollen von mehr als 50px die Farbe Schwarz mit einer Deckkraft von 90%. Das Script bezieht sich auf die id="myNavBar", die ihr der Navigationsleiste im "Code Editor" noch hinzufügen müsst. Kopiert das Script in den globalen Bereich der Site-Einstellungen "Before </body> code", wenn es auf allen Seiten des Projektes wirken soll.
<!-- Menu transparent and opaque -->
<script>
window.onscroll = function() { adjustBackground(); };
function adjustBackground() {
let menu = document.getElementById("myNavBar");
if (window.scrollY > 50) {
menu.style.backgroundColor = "rgba(0, 0, 0, 0.9)"; // dunkler Hintergrund mit 90% Deckkraft
} else {
menu.style.backgroundColor = "rgba(0, 0, 0, 0)"; // Komplett transparent
}
}
</script>
Fügt dem <nav> Tag der Menüleiste die im Script verwendete id="myNavBar" noch hinzu, wie im Screenshot unten zu sehen ist.
Wer möchte, der kann auch noch einen weichen Übergang zum Farbwechsel als Style-Anweisung in in den globalen Bereich der Site-Einstellungen "Before </head> code" einbauen.
<style>
/* smooth transition of the menu bar color while scrolling */
#myNavBar {
transition: background-color 0.3s ease-in-out; /* Weicher Übergang */
}
</style>
ID am <nav> Tag hinzufügen