Question

我有一个带5个直属孩子的flexbox。第二列和第三列（.colonnade__trigger）包含子项（span.label），该子项应具有粘性。但这不是：（

HTML

<div class="colonnade">
    <aside class="sidebar colonnade__column alpha">
        <div class="">
            NAVI
        </div>
    </aside>
    <label class="colonnade__trigger alpha" for="colonnade-alpha">
        <span class="label">
            Show Navigation
        </span>
    </label>
    <main class="main" id="main">
    </main>
    <aside class="sidebar colonnade__column omega">
        <div class="">
            CART
        </div>
    </aside>
    <label class="colonnade__trigger omega" for="colonnade-omega">
        <span class="label">
            Show Cart
        </span>
    </label>
</div>

CSS

.colonnade {
    display: flex;
}
.colonnade__trigger {
    display: block;
    width: 2em;
    padding: .5em;
    background-color: #eee;
}
.colonnade__trigger .label {
    position: sticky;
    display: block;
    transform: rotate(90deg);
    transform-origin: 0 100%
}

有关方案https://codepen.io/bitstarr/pen/QBwMEq，请参见我的Codepen

Answer 1

您需要指定一个固定位置。为此，请分配类似top: "your wanted distance"px;

例如：

.colonnade__trigger .label {
position: sticky;
top: 10px;
display: block;
transform: rotate(90deg);
transform-origin: 0 100%
}

看MDN - Sticky Position

位置：粘性在flexbox子项中不起作用

1 个答案: