Nach ankleben Style-Eigenschaften ändern
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
abstand
anpassen
beibehalten
beispiel
code
eigenschaft
farbe
folgenden texts
geburt
hintergrund
jemand
performance
position
problem
reaktion
suche
text
url
weben
zweck
-
Hallo Community.
Es tut mir leid, euch schon wieder stören zu müssen. Aber ich habe schon wieder ein Problem. Ich habe das den Titel via:
oben festgeklebt. Nun hat der Titel aber keinen Hintergrund und ist weiss. Weil der Hintergrund des darunter folgenden Texts jedoch auch weiss ist, kann man den Text unten und den Titel jetzt nicht mehr lesen. Jetzt suche ich eine Möglichkeit die Farbe des Texts in Schwarz zu ändern, wenn er oben angekommen ist. Wisst Ihr wie ich das machen kann?position: sticky; -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Vor der Geburt von sticky in CSS wurde dieses Ankleben komplett mit JavaScript gelöst. Da war es dann auch einfach, gleich eine Eigenschaftsänderung einzubauen.
Jetzt kommst du aber auch nicht um JavaScript herum. Ich habe sogar ein Beispiel gefunden, das du relativ leicht anpassen kannst. Du findest es hier
https://developers.google.com/web/updates/2017/09/sticky-headers
Sowohl die CSS-Eigenschaft sticky wie auch die JavaScript-Reaktion mit Hilfe von IntersectionObserver sind aber relativ neue Dinge, so dass es immer sein kann, dass Nutzer, die mit etwas älteren Browsern unterwegs sind, davon nichts mitbekommen. -
Sorry, scheinbar habe ich mein Problem nicht genug eingehend erläutert. Mein Problem ist, dass ich eine Möglichkeit suche herauszufinden wann das Element oben angekommen ist und nicht die Farbe zu ändern.
-
Ja, habe ich mir angeschaut aber wenn ich versuche den Event mit addEventListener() auszulesen, funzt das nicht.
-
Also wenn du es in der Form beibehalten möchtest wird das nur mit Javascript etwas. Das große Problem dabei - du müsstest den Abstand nach oben über das scroll event prüfen und das kostet performance, da der user ja ständig am scrollen ist und während des scrollens ständig der Abstand gecheckt werden müsste, selbst wenn er schon oben ist.
...addEventListener('scroll',...)
Ich empfehle dir eher zu überdenken ob du deinem Titel nicht eine dunklere Kontur geben möchtest, so wäre es deutlich auf hellen und dunklen Hintergründen zu lesen.
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage