kostenloser Webspace werbefrei: lima-city

Nach ankleben Style-Eigenschaften ändern

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   na-web

   na-web hat kostenlosen Webspace.

   14:13, 27.12.2017

   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:
   

   position: sticky;

   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?

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. mein-wunschname

   mein-wunschname hat kostenlosen Webspace.

   22:12, 27.12.2017

   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.

4. tchiarcos

   tchiarcos hat kostenlosen Webspace.

   23:12, 27.12.2017

   probiers mal damit:
   
   https://www.w3schools.com/cssref/css3_pr_text-decoration-color.asp
5. Autor dieses Themas

   na-web

   na-web hat kostenlosen Webspace.

   18:16, 3.1.2018

   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.

6. mein-wunschname

   mein-wunschname hat kostenlosen Webspace.

   17:04, 4.1.2018

   Ich verstehe nicht, warum dir jemand -1 gibt aber egal.
   Hast du dir das von mir verlinkte Beispiel mal angesehen?
   https://developers.google.com/web/updates/2017/09/sticky-headers
   Das müsst sich doch für deine Zwecke anpassen lassen
7. Autor dieses Themas

   na-web

   na-web hat kostenlosen Webspace.

   12:25, 11.1.2018

   Ja, habe ich mir angeschaut aber wenn ich versuche den Event mit addEventListener() auszulesen, funzt das nicht.

8. g*******r

   4:06, 2.3.2018

   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.
   
   

9. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?