我正在尝试实现全宽度的背景容器包装纸和粘性元素。

下图显示了我希望实现的布局:

javascript - 语义用户界面,在外部容器上有粘性-LMLPHP

这是一支笔,显示我到目前为止的布置方式:
https://codepen.io/othbert/pen/PJMwPm

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


我似乎遇到的问题是,粘性元素的直接容器的高度已设置为允许粘性在其中移动。

为了允许全角背景包装纸但保持中心对齐的内容,我使用以下结构:全角包裹纸>容器网格> 2列布局。

我想设置一个最外面的无样式容器#sticky-c,以允许粘滞符在上下文中移动,而不是立即在网格中移动,但是,将粘滞符移动所需的高度应用于包含的网格。

所有这些部分都应具有动态高度,因此不幸的是,我不能仅仅强迫网格保持一定的高度。并非没有在JS中进行计算和设置的情况,但是似乎语义上的某些事情应该可以立即使用。

有任何想法吗?

最佳答案

我在想这一切都错了。

要修复,我将带有粘性的列设置为position: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;
  }
}

09-10 12:06
查看更多