CSS sticky-Eigenschaft, wenn es stickt.

[Linuchs]

Moin,

ich muss zahlreiche Html-Dokumente zeitgleich bearbeiten. Dafür definiere ich h1 mit sticky, damit die Überschrift immer zu sehen ist.

Nun kommt es vor, dass beim Scrollen ein <br> direkt unter dem <h1> steht und es sieht so aus, als wäre die folgende Zeile die erste des Dokuments.

Gerne möchte ich <h1> eine andere Hintergrundfarbe geben, wenn es stickt.

Wie geht das?

[Gunnar Bittersmann]

@@Linuchs

Nun kommt es vor, dass beim Scrollen ein <br> direkt unter dem <h1> steht

Häh?

Wie geht das?

Bist du nicht schon lange genug hier um zu wissen, wie das geht, sein Problem verständlich zu beschreiben?

😷 LLAP

[Linuchs]

Bist du nicht schon lange genug hier um zu wissen, wie das geht, sein Problem verständlich zu beschreiben?

Ich dachte, das wäre verständlich. Normal ist Überschrift - Leerzeile - erster Satz.

Nach dem Scrollen Überschrift (sticky) - Leerzeile - n-ter Satz.

Ich möchte sehen, ob ich am Anfang des Dokuments stehe oder bereits gescrollt wurde.

[Matthias Apsel]

Hallo Linuchs,

Gerne möchte ich <h1> eine andere Hintergrundfarbe geben, wenn es stickt.

Mit der intersection observer API.

https://dev.to/bhupendra1011/how-to-know-when-css-position-sticky-get-s-applied-4gk2

Bis demnächst
Matthias

[Linuchs]

Hallo Matthias,

das ist genau die gewünschte Lösung, aber extrem kompliziert umgesetzt. Vielleicht kommt ja noch ein einfacherer Vorschlag.

Linuchs

[Localhorst (nl)]

Hallo Linuchs,

das ist genau die gewünschte Lösung, aber extrem kompliziert umgesetzt. Vielleicht kommt ja noch ein einfacherer Vorschlag.

Es gab da was in jQuery:

if($(window).scrollTop() >= ($(document).height()

Wenn das mit Vanilla nutzen will, könnte dieser Artikel vielleicht auf die Spur führen.

Good Luck
Localhorst

[Rolf B]

Hallo Linuchs,

das Thema ist schon alt

Aber :stuck (oder :sticking) gibt es immer noch nicht. Und wenn es nach dem Willen der WICG geht (wo die Großen der Branche neue Standards ausbrüten), dann wird es das auch nicht geben. Weil man in einer Regel mit h1:stuck Selektor ja auch position:static setzen könnte, und das führt zu einer Endlosschleife die man nicht beherrschen kann. Diskussion - wenn ihr das nicht einseht, streitet mit tabatkins, nicht mit mir...

Ich habe auch noch einen Artikel von Eric Bidelman (Google) gefunden - aber nicht gründlich studiert - der ein Custom Event generiert wenn ein Element sticky wird. Trivial scheint auch das nicht zu sein - klingt nach einer Aufgabe für eine .js Library, die man schreiben müsste.

Rolf

[Der Martin]

Hallo,

das Thema ist schon alt

Aber :stuck (oder :sticking) gibt es immer noch nicht.

so war auch mein Kenntnisstand. Aber das muss ja nichts heißen, und deswegen habe ich den Thread auch aufmerksam beobachtet - ich hatte auch gehofft, es gäbe da vielleicht einen Ansatz mit einer Pseudoklasse, die ich bisher nicht kenne.

Live long and pros healthy,
 Martin

[MudGuard]

Hi,

Aber :stuck (oder :sticking) gibt es immer noch nicht. Und wenn es nach dem Willen der WICG geht (wo die Großen der Branche neue Standards ausbrüten), dann wird es das auch nicht geben. Weil man in einer Regel mit h1:stuck Selektor ja auch position:static setzen könnte, und das führt zu einer Endlosschleife die man nicht beherrschen kann.

Naja, dann dürfte es z.B. :hover auch nicht geben - da könnte man ja z.B. width:0 setzen, womit der hover-Status weg wäre, was dazu führt, daß die ursprüngliche width gilt, womit der Mauszeiger wieder über dem Element ist, was dann per :hover wieder zu width:0 führt, womit ...

cu,
Andreas a/k/a MudGuard

[Rolf B]

Hallo MudGuard,

genau auch meine Überlegung, wurde auch so im Thread benannt, aber angeblich sei eine :hover basierende Loop "wide", weshalb es da nur flackert, und eine potenzielle Sticky-basierende Loop sei "tight" und würde damit den Browser lahmlegen.

Guck in die verlinkte Diskussion und versuch Dir einen Reim drauf zu machen. Ich nehme an, dass Tabatkins weiß, wovon er redet, und letztlich liest es sich so wie "wir haben das nun mal so designed, dass eine :stuck Pseudoklasse uns ins Knie schießen könnte, und damit ist es so. Tricks dich drumherum, oder mach's mit JavaScript"

Eine vom Browser gelieferte Methode, um bei bestimmten CSS Übergängen automatisch ein Event abzuschießen, das wäre sicherlich eine prima Idee. Aber auch das ist wohl erst im Proposal-Stadium und man muss sich mit Observern behelfen. Naja, zumindest verstehe ich das jetzt so. Aber ich hab ja keine Ahnung 😉

Rolf

[Linuchs]

Ich muss nach einem Scrollvorgang feststellen, ob h1 am oberen Rand des Fensters klebt. Habe ein knappes dutzend Webseiten mit Geschwurbel und Diskussionen durchgesehen, aber keine Lösung gefunden.

Überlegung:

Wenn ich sticky mit top:0 definiere und der Abstand window.scrollY genauso groß ist wie h1.offsetTop klebt h1 am oberen Rand:

var h1  = document.getElementsByTagName( "h1" )[0];
document.addEventListener('scroll', function() {
  if ( window.scrollY == h1.offsetTop ) {
    h1.classList.add( "pos_markiert" );     // Markierung setzen
  } else {
    h1.classList.remove( "pos_markiert" );  // Markierung entfernen
  }
});

funktioniert bestens.

Allerdings feuert das scroll-Event mehrmals pro Scrollvorgang, wie könnte ich das noch optimieren?

Linuchs

[JürgenB]

Hallo Linuchs,

Allerdings feuert das scroll-Event mehrmals pro Scrollvorgang, wie könnte ich das noch optimieren?

https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Debounce_und_Throttle

Gruß
Jürgen

[Linuchs]

Hallo Jürgen,

danke für den verlinkten Tipp mit timeout. Bei jedem gefeuerten Scroll-Event verschiebe ich das Setzen/Zurücknehmen der Markierung um 1 sec. Kann man kürzer machen, ich wollte den Effekt deutlich sehen.

So sieht jetzt meine Lösung aus:

window.addEventListener('DOMContentLoaded', function ( ) {
  var h1          = document.getElementsByTagName( "h1" )[0];
  var toggleTime  = null;
  function toggle_h1() {
    console.log( "[" +window.scrollY +"] [" +h1.offsetTop +"]" ); // Test wg. Timeout
    if ( window.scrollY == h1.offsetTop ) {
      h1.classList.add( "pos_markiert" );     // Farbe setzen
    } else {
      h1.classList.remove( "pos_markiert" );  // Farbe entfernen
    }
  }
  document.addEventListener('scroll', function() {
    toggleTime  = setTimeout( toggle_h1, 1000 );
  });
});

Linuchs

[Rolf B]

Hallo Linuchs,

Infos und Beispiele zu Debounce und Throttle im Self Wiki

Rolf

[JürgenB]

Hallo Rolf,

Infos und Beispiele zu Debounce und Throttle im Self Wiki

genau

Gruß
Jürgen

[Rolf B]

Hallo JürgenB,

ich hab's nochmal verlinkt weil er es beim ersten Aufruf nicht genau gelesen zu haben scheint (oder gar nicht). Ein Debouncer ohne clearTimeout macht mutmaßlich was falsch.

Rolf

[JürgenB]

Hallo Linuchs,

danke für den verlinkten Tipp mit timeout. Bei jedem gefeuerten Scroll-Event verschiebe ich das Setzen/Zurücknehmen der Markierung um 1 sec.

du hast das Reagieren auf die vielen Scroll-Events nur um eine Sekunde verschoben, aber es wird genauso oft regiert. Der Trick ist, die Reaktion im 1s-Takt laufen zu lassen. Dazu musst du die Timeouts erst starten, wenn der vorherigen gelaufen ist.

Gruß
Jürgen

[Linuchs]

Hallo Jürgen,

du hast das Reagieren auf die vielen Scroll-Events nur um eine Sekunde verschoben, aber es wird genauso oft regiert.

Du meinst, das Überschreiben von toggleTime = setTimeout( toggle_h1, 1000 ); löscht NICHT den alten Auftrag, den toggleTime hatte?

Also muss es so aussehen?

clearTimeout(toggleTime);
toggleTime  = setTimeout( toggle_h1, 1000 );

Linuchs

[Der Martin]

Hi Linuchs,

Du meinst, das Überschreiben von toggleTime = setTimeout( toggle_h1, 1000 ); löscht NICHT den alten Auftrag, den toggleTime hatte?

korrekt, der Auftrag bleibt bestehen. Dass du die alte Quittung wegwirfst, ändert daran nichts.

Also muss es so aussehen?

clearTimeout(toggleTime);
toggleTime  = setTimeout( toggle_h1, 1000 );

Schon besser.

Live long and pros healthy,
 Martin

[Linuchs]

Ja stimmt, die Kontrollanzeigen in function toggle_h1 laufen nach 1 sec los, auch wenn das Scrollen noch andauert.

Irgendwie seltsam, dass sich die Variable toggleTime viele Aufträge merken kann. Ist das ein Array?

Und auf welchen der Aufträge mit gleichem Namen bezieht sich dann clearTimeout(toggleTime);

[Der Martin]

Hallo,

Irgendwie seltsam, dass sich die Variable toggleTime viele Aufträge merken kann. Ist das ein Array?

nein.

Und auf welchen der Aufträge mit gleichem Namen bezieht sich dann clearTimeout(toggleTime);

Nur auf den letzten. Auf die anderen kannst du nicht mehr einwirken, weil du das Handle überschrieben hast.

Live long and pros healthy,
 Martin

[Matthias Apsel]

Hallo Linuchs,

Allerdings feuert das scroll-Event mehrmals pro Scrollvorgang, wie könnte ich das noch optimieren?

Was hat dir an meinem Vorschlag nicht gefallen?

Bis demnächst
Matthias

[Linuchs]

Was hat dir an meinem Vorschlag nicht gefallen?

Es sind soo viele Code-Zeilen (erst jetzt im eigenen Editor sehe ich, dass es viele Zeilenumbrüche gibt). Und ehrlich - ich habe es nicht verstanden.

• IntersectionObserver
• intersectionRatio

[Localhorst (nl)]

Hi Linuchs,

Ich muss nach einem Scrollvorgang feststellen, ob h1 am oberen Rand des Fensters klebt. Habe ein knappes dutzend Webseiten mit Geschwurbel und Diskussionen durchgesehen, aber keine Lösung gefunden.

Überlegung:

Wenn ich sticky mit top:0 definiere und der Abstand window.scrollY genauso groß ist wie h1.offsetTop klebt h1 am oberen Rand:

var h1  = document.getElementsByTagName( "h1" )[0];
document.addEventListener('scroll', function() {
  if ( window.scrollY == h1.offsetTop ) {
    h1.classList.add( "pos_markiert" );     // Markierung setzen
  } else {
    h1.classList.remove( "pos_markiert" );  // Markierung entfernen
  }
});

funktioniert bestens.

Fein.

Könntest Du einen Link auf eine öffentliche Webseite preisgeben, auf der Du das eingebaut hast? Oder ist das geheim/nur lokal?

Gesundheit!
Localhorst

[Linuchs]

Moin,

Könntest Du einen Link auf eine öffentliche Webseite preisgeben, auf der Du das eingebaut hast? Oder ist das geheim/nur lokal?

Bei <h1> geht's um ein lokales Buchprojekt.

Aber hier habe ich es für den <header> eingebaut. Das Script findest du ziemlich unten im Code.

Suche nach DOMContentLoaded

Linuchs

[Gunnar Bittersmann]

@@Linuchs

Nun kommt es vor, dass beim Scrollen ein <br> direkt unter dem <h1> steht und es sieht so aus, als wäre die folgende Zeile die erste des Dokuments.

Alternative ohne JavaScript.

Siehe Lea Verous Artikel Pure CSS scrolling shadows with background-attachment: local von 2012.

Darin steht geschrieben, dass damals auch Safari Schatten anzeigte. Vielleicht findet ja jemand raus, warum der aktuelle das nicht mehr tut.

😷 LLAP

[Linuchss]

Hallo Gunnar,

deine Verlinkung springt bei sticky um und zeigt einen Schatten. Sieht sehr gut aus, habe ich übernommen.

Bin mit meiner JS-Lösung zufrieden, aber behalte die CSS-Lösung mal im Auge.

Linuchs

[Gunnar Bittersmann]

@@Linuchss

deine Verlinkung springt bei sticky um

Da springt nichts um und sticky ist da auch nicht im Spiel.

habe ich übernommen.

Du solltest versuchen, wenigstens ansatzweise zu verstehen, was du übernimmst.

😷 LLAP