セマンティックUI、外枠に貼り付ける

Question

私は粘着性のある要素と組み合わせた全幅バックグラウンドコンテナのラッパーを実現しようとしています。

この図は私が達成したいレイアウトを示しています

そして、ここでは、私は今のところそれを打ち出してきたかを示すペンです：私が持っている https://codepen.io/othbert/pen/PJMwPm

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

を問題スティッキー要素のすぐ上のコンテナには、スティッキーが内部で動くことができるように高さが設定されているように見えます。

全幅バックグラウンドラッパーを許可するが、中央揃えのコンテンツを保持するには、全幅ラッパー>コンテナグリッド> 2列レイアウトの構造を使用しています。

私は一番外側の非構造化コンテナ、＃sticky-cを設定して、すぐにグリッドではなくそのコンテキスト内でスティッキーを移動させることを考えましたが、スティッキーの移動に必要な高さがグリッドを含む。

これらのセクションはすべて、動的な高さを持つ必要があります。残念ながら、グリッドに一定の高さを維持させることはできません。 JSで計算して設定するのではなく、これは何か意味があるように思えます。

アイデア？

Answer 1

私はこれをすべて間違って考えていました。

固定するには、固定する列をposition：relativeに設定します。次に、別のdivをpositionのstickyのまわりに直接追加しました：絶対的です。

高さがセマンティックで設定されている絶対コンテナ内でスティッキーフローが流れます。位置は、その周囲の相対的な親に基づいて正しく設定されます。

これだけです。

更新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> 
... 

とSCSS ...

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