Semantic-ui, 외부 컨테이너에 붙이기

Question

나는 끈적 끈적한 요소와 결합 된 전폭 백그라운드 컨테이너 래퍼를 얻으려고합니다.

이 그림은 내가 달성하고자하는 레이아웃을 보여줍니다 https://codepen.io/othbert/pen/PJMwPm

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

내가 가진 문제를 여기

을 그리고 내가 지금까지를 배치 한 방법을 보여주는 펜입니다 끈적 끈적한 요소의 즉각적인 컨테이너가 끈적 거리는 요소 내부로 움직일 수 있도록 높이가 설정되어있는 것처럼 보입니다.

전체 너비 배경 래퍼를 허용하지만 가운데 맞춤 콘텐츠를 유지하려면 전폭 래퍼> 컨테이너 그리드> 2 열 레이아웃을 사용하고 있습니다.

나는 바깥 쪽 unstyled 컨테이너 인 # sticky-c를 설정하여 바로 가기가 아닌 해당 컨텍스트 내에서 움직일 수 있도록하는 대신, 움직이는 데 필요한 높이가 포함 격자.

이러한 모든 섹션에는 동적 높이가 있어야합니다. 그리드를 강제로 특정 높이로 유지할 수는 없습니다. JS로 계산하고 설정하지 않고도, 이것은 의미 론적 의미가있는 것처럼 보입니다.

아이디어가 있으십니까?

Answer 1

나는이 모든 잘못에 대해 생각하고있었습니다.

해결하려면 필자는 sticky in을 사용하여 열을 position : relative로 설정했습니다. 그런 다음 위치를 가진 끈적한 스티커 주위에 다른 div를 직접 추가했습니다. 절대적입니다.

스티커는 절대 컨테이너 내에서 높이가 의미 론적으로 설정되어 있습니다. 위치는 주변의 상대 부모를 기준으로 올바르게 설정됩니다.

그리고 그게 전부입니다.

업데이트 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; 
    } 
}