Semantic-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

我在想这一切都错了。

为了解决这个问题，我将带有粘性的列设置为位置：相对。然后我直接在粘性位置周围添加了另一个包含 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;
  }
}