Ausrichtung position:sticky Elemente, die momentan in einem 'hängen' Zustand

position: sticky funktioniert auf einigen mobilen Browsern nun, so können Sie eine Menüleiste scrollen mit der Seite, aber dann kleben Sie an die Spitze des Viewports, wenn der Benutzer scrollt es.

Aber was, wenn Sie wollen, restyle Ihrem sticky menu bar leicht, wenn es derzeit "Hängenbleiben"? zB, möchten Sie vielleicht die Leiste an den Ecken abgerundet, Wann immer es das scrollen mit der Seite, aber dann, sobald es klebt an der Spitze des Viewports, die Sie wollen, um loszuwerden, oben abgerundete Ecken, und fügen Sie ein wenig Schatten unter ihm.

Gibt es irgendeine Art von pseudoselector (z.B. ::stuck), Ziel-Elemente, die position: sticky und sind derzeit kleben? Oder haben browser-Anbieter haben so etwas in der pipeline? Wenn nicht, wo soll ich es beantragen?

NB. javascript-Lösungen sind nicht gut für das, weil auf der mobilen Sie in der Regel nur einen einzigen scroll Ereignis, wenn der Benutzer entlässt Ihre finger, so dass JS nicht wissen können, den genauen Zeitpunkt, dass die scroll-Schwelle überschritten.

InformationsquelleAutor callum | 2014-08-14

70

Derzeit gibt es keine Auswahl, wird vorgeschlagen, für Elemente, die derzeit "stecken". Die Postioned-Layout-Modul wo position: sticky definiert ist, nicht erwähnt, das solche Selektor entweder.

Feature-requests für CSS gebucht werden können, um die www-Stil-mailing-Liste. Ich glaube, dass ein :stuck pseudo-Klasse mehr Sinn macht, als ein ::stuck pseudo-element, da bist du auf der Suche zum Ziel, die Elemente selbst, während Sie in diesem Zustand. In der Tat, ein :stuck pseudo-Klasse wurde besprochen,vor einiger Zeit; die wichtigste Komplikation, es war gefunden, ist eine, die plagen nur über eine vorgeschlagene Auswahl, die versucht, basierend auf einer gerenderten oder berechneten Stil: zirkuläre Abhängigkeiten.

Im Falle einer :stuck pseudo-Klasse, der einfachste Fall von zirkularität auftreten würde, mit den folgenden CSS:
```
:stuck { position: static; /* Or anything other than sticky/fixed */ }
:not(:stuck) { position: sticky; /* Or fixed */ }
```
Und es könnten viele weitere edge-Fälle, die schwierig sein würde, zu behandeln.

Während es in der Regel vereinbart, dass-Auswahlen, Spiel, basierend auf bestimmten layout-Staaten wäre schön, leider wesentliche Einschränkungen vorhanden sind, dass diese nicht-trivial zu implementieren. Ich würde nicht meinen Atem halten für eine Reine CSS Lösung für dieses problem in absehbarer Zeit.
- Leider @BoltClock ist richtig, es wird nicht in der Muttersprache für eine lange lange Zeit. Beispiel-hacks um diese konnte gefunden werden: yahoo mail (scrollen Sie ein E-mail-Inhalte, Sie haben einen schönen trick) und das google dashboard (mit absoluter Schatten-element).
- Das ist eine Schande. Ich war auf der Suche nach einer Lösung für dieses problem zu. Wäre es nicht ziemlich einfach zu führen Sie einfach eine Regel, die sagt position Eigenschaften auf einen :stuck Selektor ignoriert werden sollte? (in der Regel für die Hersteller von Browsern, meine ich, ähnlich zu Regeln, wie left Vorrang vor right etc))
- Es ist nicht nur die position... stellen Sie sich eine :stuck dass Veränderungen der top Wert von 0 zu 300px, dann scrollen Sie nach unten 150px... sollte es bleiben oder nicht? Oder denken Sie über ein element mit position: sticky und bottom: 0 wo die :stuck vielleicht ändert font-size und deshalb der Elemente Größe (daher die änderung der moment, in dem es haften sollten)...
- Siehe github.com/w3c/csswg-drafts/issues/1660 wo ist der Vorschlag zu haben JS Ereignisse zu wissen, wenn etwas wird hängen/hängen geblieben. Das sollte nicht die Probleme haben, dass eine pseudo-Selektor eingeführt.
- Ich bin für, die.
- Ich glaube, die gleiche kreisförmige Probleme können mit vielen bereits vorhandenen Pseudoklassen (z.B. :hover ändern der Breite und :nicht(:hover) ändern wieder zurück). Ich würde lieben,: stuck-pseudo-Klasse und denke, dass der Entwickler zuständig sein sollte für die nicht die zirkulären Fragen in seinem code.
- Lisý: ja, die Argumentation gegeben, die von browser-Herstellern ist, dass Sie wollen nicht den gleichen Fehler machen. Ich bin damit einverstanden, dass der Autor dafür verantwortlich sein soll, aber Anbieter haben immer noch zu schützen gegen den Autor Fehler.
- Naja... ich weiß wirklich nicht verstehen, dies als Fehler - es ist wie gesagt while Zyklus ist schlecht konzipiert ist, weil es erlaubt endlosen Schleife 🙂 Aber danke für die Klärung 😉
- Alle workarounds mit JS jetzt für diese?
- Hier ist ein blog-post mit einem hack, Sie verwenden können, in der Zwischenzeit: developers.google.com/web/updates/2017/09/sticky-headers
- Ich rate sehr gegen die hack von oben. Die weltweite Unterstützung für IntersectionObserver niedrig ist. Wenn Sie nicht geschachtelten Blättern, Sie sind besser mit getClientBoundingRect() und navigieren Sie hören.
- wenn ie4 unterstützen könnte :hover{display:none;} ich bin mir sicher, dass moderne Browser wird nicht explodieren, mit :stuck{position:static;}
- Haben Sie eigentlich gesehen, was :hover{display:none;} aussieht? In den meisten Browsern Elemente nur flimmern in und aus der Existenz so schnell wie die Anzeige aktualisieren können. Und der rest des Layouts wird beeinträchtigt, wie es geschieht. Ich glaube nicht, dass Browser einführen zu wollen more Situationen wie dieser.
- Ja, es sieht buggy aus. Die Möglichkeit zu schaffen, ein fehlerhaftes Verhalten mit einer elaborierten Technik ist nicht ein Grund zu deaktivieren einer (dringend benötigten) Funktion alle zusammen. Zum Beispiel, in der Lage zu geben <div> (statt <li>) innerhalb <ul> ist kein Grund, Sie zu verwerfen, listet alle zusammen, ist es?
- Schlechtes markup und zyklische Abhängigkeiten in CSS sind zwei unterschiedliche Klassen von Problemen ganz.
- Es ist nur ein Gleichnis. Hier ist ein weiteres - sollen wir Abbrechen von Schleifen in JS-da kann man endlos-Schleife? Das element würde flimmern wie verrückt, wenn dabei :stuck{position:static} - so soll es sein. Sollte es nicht trotzdem passieren, die Menschen wollen einfach nur das :stecken, setzen box-shadow oder ändern Sie ein element, indem Sie die überprüfung .is(':stuck') auf scroll Veranstaltung.
InformationsquelleAutor BoltClock

Nicht wirklich ein fan der Verwendung von js-hacks für styling-Zeug (ie getBoudingClientRect, Blättern Zuhören, die Größe hören), aber das ist wie ich bin gerade auf die Lösung des Problems. Diese Lösung haben Probleme mit Seiten, die minimizable/maximizable-Inhalt (<details>), oder geschachtelten Blättern, oder wirklich jede Kurve Bälle zu löschen. , Die being said, es ist eine einfache Lösung, wenn das problem ist einfach wie gut.

let lowestKnownOffset: number = -1;
window.addEventListener("resize", () => lowestKnownOffset = -1);

const $Title = document.getElementById("Title");
let requestedFrame: number;
window.addEventListener("scroll", (event) => {
    if (requestedFrame) { return; }
    requestedFrame = requestAnimationFrame(() => {
        //if it's sticky to top, the offset will bottom out at its natural page offset
        if (lowestKnownOffset === -1) { lowestKnownOffset = $Title.offsetTop; }
        lowestKnownOffset = Math.min(lowestKnownOffset, $Title.offsetTop);
        //this condition assumes that $Title is the only sticky element and it sticks at top: 0px
        //if there are multiple elements, this can be updated to choose whichever one it furthest down on the page as the sticky one
        if (window.scrollY >= lowestKnownOffset) {
            $Title.classList.add("--stuck");
        } else {
            $Title.classList.remove("--stuck");
        }
        requestedFrame = undefined;
    });
})

InformationsquelleAutor Seph Reed

1

In einigen Fällen kann ein einfacher IntersectionObserver kann den trick tun, wenn die situation es erlaubt, zum Aufkleben auf ein oder zwei pixel, die sich außerhalb seiner Stamm-container, anstatt richtig bündig an. So, wenn es sitzt genau über die Kante, die der Betrachter feuert und wir sind Weg und ausgeführt.
```
const observer = new IntersectionObserver( 
  ([e]) => e.target.toggleAttribute('stuck', e.intersectionRatio < 1),
  {threshold: [1]}
);

observer.observe(document.querySelector('nav'));
```
Kleben Sie das element nur aus seinem Behälter mit top: -2px, und dann den Gegner über die stuck Attribut...
```
nav {
  background: magenta;
  height: 80px;
  position: sticky;
  top: -2px;
}
nav[stuck] {
  box-shadow: 0 0 16px black;
}
```
Beispiel hier: https://codepen.io/anon/pen/vqyQEK

InformationsquelleAutor rackable

Jemand auf der Google-Entwickler-blog Ansprüche gefunden zu haben, der eine performative JavaScript-basierte Lösung mit einem IntersectionObserver.

Relevanten code bit hier:

/**
 * Sets up an intersection observer to notify when elements with the class
 * `.sticky_sentinel--top` become visible/invisible at the top of the container.
 * @param {!Element} container
 */
function observeHeaders(container) {
  const observer = new IntersectionObserver((records, observer) => {
    for (const record of records) {
      const targetInfo = record.boundingClientRect;
      const stickyTarget = record.target.parentElement.querySelector('.sticky');
      const rootBoundsInfo = record.rootBounds;

      //Started sticking.
      if (targetInfo.bottom < rootBoundsInfo.top) {
        fireEvent(true, stickyTarget);
      }

      //Stopped sticking.
      if (targetInfo.bottom >= rootBoundsInfo.top &&
          targetInfo.bottom < rootBoundsInfo.bottom) {
       fireEvent(false, stickyTarget);
      }
    }
  }, {threshold: [0], root: container});

  //Add the top sentinels to each section and attach an observer.
  const sentinels = addSentinels(container, 'sticky_sentinel--top');
  sentinels.forEach(el => observer.observe(el));
}

Ich noch nicht repliziert wurden, es selbst, aber vielleicht hilft es ja jemand stolpern über diese Frage.

InformationsquelleAutor neo post modern

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.