Semantic-Ui, klebrig am äußeren Container

Question

Ich versuche, Hintergrund Container Wrapper in voller Breite kombiniert mit einem klebrigen Element zu erreichen.

Dieses Diagramm zeigt das Layout ich erreichen will:

Und hier ist ein Stift zeigt, wie ich es so weit gelegt habe aus: https://codepen.io/othbert/pen/PJMwPm

$('[data-make-sticky-to]').sticky({ 
    context: $('[data-make-sticky-to]').data('makeStickyTo') 
}) 

Die Frage, die ich habe Es scheint so zu sein, dass der sofortige Container des sticky-Elements so hoch ist, dass sich das Sticky darin bewegen kann.

Um Hintergrund-Wrapper mit voller Breite zuzulassen, aber den zentrierten Inhalt beizubehalten, verwende ich die Struktur: Full-width-wrapper> container grid> 2 column layout.

Ich dachte, einen äußersten unstyled Container, # sticky-c, zu setzen, damit sich das Sticky innerhalb dieses Kontextes bewegen kann, anstatt das unmittelbare Gitter, stattdessen wird die Höhe, die für das Sticky benötigt wird Gitter enthalten.

Alle diese Abschnitte sollten eine dynamische Höhe haben, so dass ich das Raster nicht zwingen kann, eine bestimmte Höhe zu halten. Nicht ohne es in JS zu berechnen und zu setzen, aber das scheint etwas zu sein, was semantisch in der Lage sein sollte, out of the box zu tun.

Irgendwelche Ideen?

Answer 1

Ich dachte darüber alles falsch.

Um zu beheben, setze ich die Spalte mit dem Sticky in, um: relativ. Dann fügte ich ein weiteres enthaltendes div direkt um das klebrige mit Position: absolut hinzu.

Der Sticky fließt innerhalb des absoluten Containers, dessen Höhe durch Semantik festgelegt wurde. Die Position wird korrekt festgelegt, da sie auf dem relativen übergeordneten Element basiert, das sie umgibt.

Und das ist alles, was dazu gehört.

Aktualisiert codepen: https://codepen.io/othbert/pen/MOWBja

... 
<div class="three wide left floated column sticky-relative"> 
    <div class="sticky-absolute"> 
    <div class="ui sticky segment" data-make-sticky-to="#sticky-c"> 

     STICKY CONTENT 

    </div> 
    </div> 
</div> 
... 

und die SCSS ...

.sticky { 
    &-relative { 
    position: relative; 
    } 
    &-absolute { 
    position: absolute; 
    } 
}