Menüleiste Transparent - dann beim Scrollen in Farbe

[inno]

Hallo Tommy,
bei den transparenten Menüleisten in den M4-Themes (z.B. STORE M4) wurde beim Scrollen von transparent in die ausgewählte Farbe gewechselt. In den M5-Themes geht das leider nicht mehr. Gibt es hier eine Möglichkeit?
Grüße

[stobi_de]

Ich bin jetzt nicht Tommy, aber darf ich trotzdem antworten?

Das geht via Javascript.
Scrollposition abfragen und dann auf die Navi ein ".style.setProperty('background', 'green', 'important');"

Hier auf der Seite ist was Ähnliches: https://www.pfrommer-gmbh.de
Es wird nur das Logo ausgeblendet, ist aber im Grunde das Gleiche.

Such im Code nach "window.onscroll = function() {myFunction()};"

Frank

[inno]

Hallo Frank,
aber klar doch.

Ich finde im CSS leider den Code window.onscroll... nicht.
Ich verwende das Menü aus dem Theme MOBIRISE 5.

Gruß

[Tommy Herrmann]

Moin,

also ich kann dem was Frank geschrieben hat jetzt auch nicht ohne Weiteres folgen

Bei den Mobirise5 / M5 Themen ist das nicht mehr möglich - jedenfalls von Mobirise nicht vorgesehen.

Du kannst die Menüleiste zwar transparent stellen, dann bleibt diese aber auch, nach dem Scrollen, transparent.

[stobi_de]

Hier nun ein Folgehinweis zum besseren Folgen.
Ist getestet und klappt. Soft-Einblenden der Farbe nach dem Scrollen bedarf noch etwas Tuning

1. der Navi die ID id-nav geben
2. Dann dieser Code am End of Body

Code: Alles auswählen

<script>
window.onscroll = function() {myFunction()};

function myFunction() {

  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {    
    document.getElementById("id-nav").style.setProperty('background', '#fff', 'important');

  } else {
    document.getElementById("id-nav").style.setProperty('background', 'transparent', 'important');
  }

}
</script>

[inno]

Wo gebe ich der Navi die ID?

[Tommy Herrmann]

Die ID eines jeden Blocks steht im "Code Editor" oben links (im Screenshot rot markiert).

Die kannst Du dort überschrieben / umbenennen.

[stobi_de]

Und dieses hier im css-Teil des Navi-Blocks ergänzen, dann haben wir einen schön weichen Übergang.

Code: Alles auswählen

#id-nav {
  transition: background 0.5s ease;
}

[inno]

Funktioniert, leider nicht bei mir! ;-(

[Tommy Herrmann]

Moin,

Ich baue das Script, das Frank hier gepostet hat, gleich mal in Mobirise ein (mit Anleitung).

Melde mich dann erneut hier...

[Tommy Herrmann]

Ich habe das jetzt hier mal in dieser Seite mit eingebaut:

https://www.mobirise-tutorials.com/Test ... nette.html

Wenn Du mehr als 50 px runter scrollst, dann wird durch das JavaScript eine Hintergrundfarbe eingesetzt. Ansonsten ist die Menüleiste von Beginn an transparent (egal was Du in Mobirise eingestellt hast).

Im Header-Block findest Du den Button "Navi Transparent", der Dich zu meinem Tutorial führt.

Bedenke, dass das erst nach dem Publizieren (lokal oder entfernt) wirken kann, da erst dann das JavaScript aktiv wird. Auf der Arbeitsseite kann daher noch nichts dargestellt werden.

[Tommy Herrmann]

Hallo Frank,

sehe gerade, dass das JavaScript für die Transparenz der Navi so am Handy nicht ganz richtig funktioniert.

Dort muss auch erst 50px runter gescrollt werden, damit die Submenüs einen Hintergrund bekommen. Am Top der Seite sind diese ebenfalls transparent, was so nicht sein sollte. Das ist am Desktop nicht so, dort werden die Submenüs gleich in Farbe hinterlegt, damit man diese auch erkennen kann, wenn die Navi selbst noch transparent ist.

Es fehlt also noch ein Bezug nur auf die Menüleiste oben im JavaScript.

Hast Du dafür eine Idee, denn so kann man es eigentlich nicht verwenden

[stobi_de]

Uh, gar nicht gut.
Ich denke mal eben nach.
Reicht ja eigentlich, wenn die grundsätzlich auf dem Handy immer undurchsichtig sind.

Moment: im Javascript das "important" weg. dann klappt es. Warum, weiß ich jetzt nicht
Habs jetzt nur lokal getestet...

[Tommy Herrmann]

Hallo Frank,

ja - prima

So geht es …

https://www.mobirise-tutorials.com/Test ... nette.html

Ich denke Mobirise setzt das ja bereits auch für seine transparente Navi um, nur eben ohne "important" und Du hast das damit überschrieben.