Mit CSS scrollen erkennen

[Hannes Weninger]

Hallo,

ich weiß gar nicht mehr, wie ich hier ein Posting reinschreiben soll, ohne das sich wieder jemand aufregt.
Ich versuche zu Antworten und bleib bei einem Namen - das ist ja das was mir vorgeworfen wird, wobei ich das mit den Namen nicht ganz versteh - is ja egal welcher Name oben drinn steht - aber soll so sein.

Also, ich verscuhts nochmal mit einer Frage:
Kann ich mit CSS3 detektieren, dass gescrollt wurde.
Hintergund ist der, dass ich ein Logo im Content habe, wenn hinuntergescrollt wurde, sodass man das Logo nicht mehr sieht (z.B. 40px), dann möchte ich das Logo im Header, welches ich mit display: none; versteckt habe, sichtbar machen (mit display: inline wenn das geht - das hab ich noch nicht ausprobiert).

Ist sowas mit CSS möglich oder brauch ich da JavaScript?
Wenn ich JavaScript brauche, vielleicht hat jemand einen Link - ich hab schon danach gesucht, wahrscheinlich mit den Falschen Schlagworten.

Wäre dankbar für hilfreiche Antworten.

lg
Hannes (übrigens mein richtiger Name)

[bubble]

Ist sowas mit CSS möglich oder brauch ich da JavaScript?

Nein, du brauchst JavaScript.

Wenn ich JavaScript brauche, vielleicht hat jemand einen Link - ich hab schon danach gesucht, wahrscheinlich mit den Falschen Schlagworten.

Vorn weg: Logo1 ist das statische Logo, Logo2 ist jenes, welches sich im Header befindet.
An sich brauchst du (zusätzlich) nur eine Klasse die Logo2 versteckt. Ich nenn sie mal für weiteres hidelogo

Mittels scroll-Event kannst du auf scrollen reagieren. Du ermittelst einfach nur ob Logo1 sichtbar ist, wird hidelogo aus der Klassenliste von Logo2 herausgenommen, wenn Logo1 nicht sichtbar ist, wird die hidelogo Logo2 hinzugefügt.

Stichworte für scroll-Event wären unter google (oder welche SuMa du auch immer verwendest) javascript event scroll onscroll
https://developer.mozilla.org/en-US/docs/Web/API/window.onscroll 3. Treffer

Stichworte für das hinzufügen/entfernen von Klassen wären wohl javascript add remove class
http://stackoverflow.com/questions/195951/change-an-elements-css-class-with-javascript 1. Treffer

Das sollte dir genug Informationen geben um die Lösung auszuarbeiten.

Angemerkt sei, dass Smartphones scroll-Events und fixe Elemente nicht unbedingt mögen.

MfG
bubble

[suit]

Angemerkt sei, dass Smartphones scroll-Events und fixe Elemente nicht unbedingt mögen.

Das ist nicht ganz richtig - es geht hier nicht um Smartphones sondern um Geräte die ggf. per Touch bedient werden und keinen scrollbar haben - es gibt durchaus Smartphones die gewöhnlich Scrollen :)

Bei position: fixed ist es auch wieder so eine Sache wie das Gerät bzw. der Browser funktioniert - wenn man wie iOS vorrangig auf panning setzt, wird es mit fixed unerwartete Probleme geben. Windows Phone z.B. hat aber kein Problem mit Fixed, dessen IE-Derivat arbeitet etwas anders.

[Hannes Weninger]

Vielen Dank für die Antworten, ich werd mir das heute nach der Arbeit ansehen.
lg
Hannes