Antworten zum Thema „Menü beim scrollen eine andere Hintergrundfarbe geben.“

[Photostile]

Hallo,

ich wollte mal fragen, wie ich ein Menü so darstellen kann, dass es bei einer bestimmten Höhe seine Hintergrundfarbe beim scrollen verändert. Beispiel: flatfilthy.se

Liebe Grüße,
Photostile

 

[lachender_engel]

In Deinem Beispiel finde ich die von Dir beschriebene Funktion nicht. Wobei sie zudem sehr ungenau beschrieben ist. Aber nach den Punkten "Menü scrollen" und "Farbe ändern" ist nichts zu sehen.

 

[TPHeinz]

Moin,

suche doch mal nach @media in Suchmaschinen

oder siehe bei

http://wiki.selfhtml.org/wiki/CSS/Media_Queries

rein

 

[Photostile]

Hallo,

@lachender_engel Scrolle mal runter, bis der weiße Bereich erscheint. Du wirst sehen, dass von von der transparenten Hintergrundfarbe eine nicht transparente Farbe erscheint.

@TPHeinz Mit media queries wird es nicht funktionieren, weil ich kein responsive Design erstellen möchte. Trotzdem vielen dank.

Ein besseres Beispiel: http://www.degordian.com/

 

[TPHeinz]

Auf dieser Seite sind einige Free Html5 / css3 Themen.
Responsive, ist deine Beispielseite aber auch.
Solltest dir Twenty mal näher ansehen/downloaden.

 

[Myhar]

Kann keiner lesen oder warum kommen hier nur unnötige Links?
Um dem TS eine Lösung anzubieten: Das Vorhaben kann man mit JS umsetzen. Ermittle mittels Javascript, wie weit der User gescrollt hat und je nachdem änderst du die Hintergrundfarbe des Menüs.

 

[Photostile]

Hallo,
sorry das ich mich jetzt erst melde..
Benutze derzeit folgenden Code:

1. <script type="text/javascript">
2. var foo = document.getElementById('menu');
3. window.onscroll = function() {
4. menu.style.backgroundColor = ((window.pageYOffset || document.documentElement.scrollTop) > 100) ? 'transparent' : 'black';
5. };
6. </script>

Funktioniert soweit, allerdings wird es beim "hoch" scrollen nicht wieder transparent.
@Myhar Hast du eine Idee ?

 

[Myhar]

Wozu definierst du die Variable foo?
Lass dir mittels console.log die Werte für window.pageYOffset und scrolltop ausgeben, eventuell gibt das einen Hinweis auf die Fehlerquelle? Bzw. den Rückgabewert für deine if-abfrage.
Ohne Live-Beispiel kann ich leider nur Hinweise zum debuggen geben.