语义-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 的位置：absolute.

绝对容器内的粘性流，其高度由语义设置。该位置设置正确，因为它基于它周围的相对父级。

仅此而已。

更新代码笔：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;
  }
}

语义-ui，粘在外容器上

Semantic-ui, sticky on outer container

javascript

css

sticky

semantic-ui