Position: sticky lässt Eltern nicht

Wie kann ein Element klebrig machen, so dass es oben im Ansichtsfenster bleibt? Ich möchte, dass das Element auch dann klebrig bleibt, wenn es den Behälter verlässt.Position: sticky lässt Eltern nicht

Ich habe versucht, diese

HTML

<div class="page"> 
    <div class="parent"> 
    <div class="child-sticky"> 
     <p>i want to be sticky, even when I'm outside my parent.</p> 
    </div> 
    </div> 
</div>

CSS

.child-sticky { 
    position:sticky; 
    top:20px; 
} 

.page { 
    height: 3000px; 
}

Hier ist ein Stift, das Problem zu veranschaulichen. Scrolle nach unten, um zu sehen, was ich meine.

https://codepen.io/pwkip/pen/OxeMao

Quelle

2017-10-24 Jules Colle

Ich denke, sie wissen, dass es nicht ideal ist. Wenn ich [diese Ausgabe] (https://www.w3.org/TR/css-position-3/#issue-12e9f6da) richtig interpretiere, wäre es ideal, wenn der Sticky relativ zum nächsten scrollenden Vorfahren wäre , aber Komplikationen mit dem CSS-Objektmodell verhindern dies. –

Sticky auf diese Weise funktioniert, wird es sticky relativ zu seinem bleiben. Sie müssen fixed verwenden. Check this codepen

Quelle

2017-10-24 14:26:44 Nicholas

ich hatte gehofft für eine css-only-lösung, dies zu tun, aber da es nur ein paar linien von js ist, sieht das im moment wie die beste lösung aus –

So soll position: sticky funktionieren. Wenn Sie möchten, dass es auch außerhalb des übergeordneten Elements funktioniert, müssen Sie die HTML-Struktur ändern.

Siehe auch die offizielle Definition: https://www.w3.org/TR/css-position-3/#sticky-pos

Quelle

2017-10-24 14:29:06 cloned

Position: sticky lässt Eltern nicht

Antwort

Verwandte Themen