Sticky Bereich mit CSS beeinflussen?

[Linuchs]

Moin,

Ich habe sticky Kapitelüberschriften in einem Dokument, die beim Scrollen solange stehen bleiben, bis sie von der nächsten Kapitelüberschrift verdeckt werden.

Nun möchte ich gerne das Aussehen dieser sticky Elemente ändern (z.B. Schriftfarbe), damit klar ist Du bist nicht Am Anfang dieses Kapitels, sondern mitten drin.

Wie geht das?

Herzliche sonnige Sonntagsgrüße von Linuchs

[Tabellenkalk]

Hallo,

Nun möchte ich gerne das Aussehen dieser sticky Elemente ändern (z.B. Schriftfarbe), damit klar ist Du bist nicht Am Anfang dieses Kapitels, sondern mitten drin.

Wie geht das?

Suchst du den Geschwisterselektor?

Z.B.

h3 ~ h3 { color: blorange}

Gruß
Kalk

[Der Martin]

n'Abend,

Nun möchte ich gerne das Aussehen dieser sticky Elemente ändern (z.B. Schriftfarbe), damit klar ist Du bist nicht Am Anfang dieses Kapitels, sondern mitten drin.

Wie geht das?

Suchst du den Geschwisterselektor?

das glaube ich nicht.
Ich habe Linuchs eher so verstanden, dass er wissen will, wann die sticky-Regel greift, das Element also wirklich am Rand klebt, und mit einer weiteren CSS-Regel darauf reagieren (z.B. die Überschrift dann nicht mehr 1.6em groß anzeigen, sondern nur noch 1.2em).

Eine solche Möglichkeit ist mir aber auch nicht bekannt - obwohl die Idee faszinierend ist.

Einen schönen Tag noch
 Martin

[Rolf B]

Hallo Linuchs,

du bist nicht allein.

Hier sind Leidensgenossen - mit ein paar Ideen.

TL;DR: JavaScript und Interaction Observer

Rolf

[Gunnar Bittersmann]

@@Linuchs

Ich habe sticky Kapitelüberschriften in einem Dokument, die beim Scrollen solange stehen bleiben, bis sie von der nächsten Kapitelüberschrift verdeckt werden.

Nun möchte ich gerne das Aussehen dieser sticky Elemente ändern (z.B. Schriftfarbe), damit klar ist Du bist nicht Am Anfang dieses Kapitels, sondern mitten drin.

Wie geht das?

Mit Scroll-linked Animations sollte das gehen – bislang als experimentelles Feature nur in Chromia hinter einem Flag.

Bramus Van Damme hat das im CSS Café mal vorgestellt: Video. Erklärungen und Beispiele auf seiner Website.

🖖 Живіть довго і процвітайте