kostenloser Webspace werbefrei: lima-city


Nach ankleben Style-Eigenschaften ändern

lima-city: kostenloser WebspaceForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    na-web

    Benutzer, kostenlos WebspaceBenutzer, kostenlos Webspace Stallbursche

    333 Gulden

    3 positive Bewertungen
    0

    na-web hat kostenlosen Webspace.

    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

    Benutzer, kostenlos WebspaceBenutzer, kostenlos WebspaceBenutzer, kostenlos WebspaceBenutzer, kostenlos Webspace Lanzenträger

    9607 Gulden

    125 positive Bewertungen
    1

    mein-wunschname hat kostenlosen Webspace.

    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

    Benutzer, kostenlos WebspaceBenutzer, kostenlos WebspaceBenutzer, kostenlos Webspace Bediensteter

    1690 Gulden

    33 positive Bewertungen
    0

    tchiarcos hat kostenlosen Webspace.

  5. Autor dieses Themas

    na-web

    Benutzer, kostenlos WebspaceBenutzer, kostenlos Webspace Stallbursche

    333 Gulden

    3 positive Bewertungen
    0

    na-web hat kostenlosen Webspace.

    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

    Benutzer, kostenlos WebspaceBenutzer, kostenlos WebspaceBenutzer, kostenlos WebspaceBenutzer, kostenlos Webspace Lanzenträger

    9607 Gulden

    125 positive Bewertungen
    0

    mein-wunschname hat kostenlosen Webspace.

    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

    Benutzer, kostenlos WebspaceBenutzer, kostenlos Webspace Stallbursche

    333 Gulden

    3 positive Bewertungen
    0

    na-web hat kostenlosen Webspace.

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

    Kostenloser Webspace von gamegazer

    Benutzer, kostenlos WebspaceBenutzer, kostenlos WebspaceBenutzer, kostenlos WebspaceBenutzer, kostenlos Webspace Narrenkönig

    4443 Gulden

    2 positive Bewertungen
    0

    gamegazer hat kostenlosen Webspace.

    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?

Über lima-city

Login zum Webhosting ohne Werbung!