Я пытаюсь получить полноэкранные обертки контейнера фона в сочетании с липким элементом.
Эта диаграмма показывает макет, который я хочу достичь:
И вот ручка, показывающая, как я ее выложил до сих пор: https://codepen.io/othbert/pen/PJMwPm
$('[data-make-sticky-to]').sticky({
context: $('[data-make-sticky-to]').data('makeStickyTo')
})
Проблема, которая возникает у меня, заключается в том, что в непосредственном контейнере липкого элемента установлена высота, позволяющая липкой перемещаться внутри нее.
Чтобы разрешить полноэкранные обертки ширины, но сохраняйте выравниваемый по центру контент, я использую структуру: full-width-wrapper> grid> 2 layout.
Я решил установить самый внешний нестационарный контейнер, # sticky-c, чтобы позволить липкой двигаться внутри этого контекста, а не непосредственно в сетке, но вместо этого высота, необходимая для перемещения липкой, применяется к содержащейся сетке.
Все эти разделы должны иметь динамическую высоту, поэтому я не могу просто заставить сетку оставаться на определенной высоте, к сожалению. Не без вычисления и настройки в JS, но похоже, что что-то семантическое должно быть в состоянии сделать из коробки.
Есть идеи?
Я думал об этом не так.
Чтобы исправить, я установил столбец с липкой в позицию: relative. Затем я добавил еще один содержащий div непосредственно вокруг липкого с положением: абсолютным.
Липкие потоки в абсолютном контейнере, который имеет высоту, установленную семантикой. Позиция задана правильно, поскольку она основана на относительном родительском окружении.
И это все.
Обновлен код: 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;
}
}