Seite 1 von 1
Menüleiste Transparent - dann beim Scrollen in Farbe
Verfasst: Di 28. Mai 2024, 09:53
von 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
Re: Menüleiste Transparent - dann beim Scrollen in Farbe
Verfasst: Di 28. Mai 2024, 10:14
von 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
Re: Menüleiste Transparent - dann beim Scrollen in Farbe
Verfasst: Di 28. Mai 2024, 10:42
von 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ß
Re: Menüleiste Transparent - dann beim Scrollen in Farbe
Verfasst: Di 28. Mai 2024, 13:41
von 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.
Re: Menüleiste Transparent - dann beim Scrollen in Farbe
Verfasst: Di 28. Mai 2024, 14:03
von 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>
Re: Menüleiste Transparent - dann beim Scrollen in Farbe
Verfasst: Di 28. Mai 2024, 14:23
von inno
Wo gebe ich der Navi die ID?
Re: Menüleiste Transparent - dann beim Scrollen in Farbe
Verfasst: Di 28. Mai 2024, 16:19
von Tommy Herrmann
Die ID eines jeden Blocks steht im "Code Editor" oben links (im Screenshot rot markiert).
Die kannst Du dort überschrieben / umbenennen.
Re: Menüleiste Transparent - dann beim Scrollen in Farbe
Verfasst: Di 28. Mai 2024, 16:50
von stobi_de
Und dieses hier im css-Teil des Navi-Blocks ergänzen, dann haben wir einen schön weichen Übergang.
Re: Menüleiste Transparent - dann beim Scrollen in Farbe
Verfasst: Mi 29. Mai 2024, 13:29
von inno
Funktioniert, leider nicht bei mir! ;-(
Re: Menüleiste Transparent - dann beim Scrollen in Farbe
Verfasst: Do 30. Mai 2024, 10:46
von Tommy Herrmann
Moin,
Ich baue das Script, das Frank hier gepostet hat, gleich mal in Mobirise ein (mit Anleitung).
Melde mich dann erneut hier...
Re: Menüleiste Transparent - dann beim Scrollen in Farbe
Verfasst: Do 30. Mai 2024, 11:19
von 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.
Re: Menüleiste Transparent - dann beim Scrollen in Farbe
Verfasst: Fr 31. Mai 2024, 07:53
von 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
Re: Menüleiste Transparent - dann beim Scrollen in Farbe
Verfasst: Fr 31. Mai 2024, 08:32
von 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...
Re: Menüleiste Transparent - dann beim Scrollen in Farbe
Verfasst: Fr 31. Mai 2024, 08:52
von 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.