我正在尝试实现全宽度的背景容器包装纸和粘性元素。
下图显示了我希望实现的布局:
这是一支笔,显示我到目前为止的布置方式:
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;
}
}