粘性位置不适用于列 headers

Question

我想使用位置粘性，但我注意到如果内容有样式列，它不起作用。这是我在 JSFiddle 中制作的示例。 https://jsfiddle.net/3f056yqv/

.sticky {
  position: sticky;
  top: 0;
  background: #000;
  color: #FFF;
}

.content {
  height: 200px;
  background: #FFF000;
}

.min {
  width: 48%;
  vertical-align: top;
  display: inline-block;
}

.notworking {
  columns: 100px 3;
}

<div class="min">
  <div>
    <div class="sticky">Working 1</div>
    <div class="content">Content 1</div>
  </div>
  <div>
    <div class="sticky">Working 2</div>
    <div class="content">Content 2</div>
  </div>
  <div>
    <div class="sticky">Working 3</div>
    <div class="content">Content 3</div>
  </div>
</div>

<div class="min notworking">
  <div>
    <div class="sticky">Not Working 1</div>
    <div class="content">Content 1</div>
  </div>
  <div>
    <div class="sticky">Not Working 2</div>
    <div class="content">Content 2</div>
  </div>
  <div>
    <div class="sticky">Not Working 3</div>
    <div class="content">Content 2</div>
  </div>
</div>

有解决办法吗？或者可能有解决方法？

Answer 1

粘滞不适用于列逻辑。因为列中的元素不在固定位置。例如，它们漂浮在 1. 2. 或 3. 列中。您可以使用 grid 而不是列。

.sticky {
  position: sticky;
  top: 0;
  background: #000;
  color: #FFF;
}

.content {
  height: 200px;
  background: #FFF000;
}

.min {
  width: 48%;
  vertical-align: top;
  display: inline-block;
}

.notworking {
  display: inline-grid;
  grid-template-columns: repeat(3, 1fr);
}

<div class="min">
  <div>
    <div class="sticky">Working 1</div>
    <div class="content">Content 1</div>
  </div>
  <div>
    <div class="sticky">Working 2</div>
    <div class="content">Content 2</div>
  </div>
  <div>
    <div class="sticky">Working 3</div>
    <div class="content">Content 3</div>
  </div>
</div>

<div class="min notworking">
  <div>
    <div class="sticky">Not Working 1</div>
    <div class="content">Content 1</div>
  </div>
  <div>
    <div class="sticky">Not Working 2</div>
    <div class="content">Content 2</div>
  </div>
  <div>
    <div class="sticky">Not Working 3</div>
    <div class="content">Content 2</div>
  </div>
</div>

粘性位置不适用于列 headers

Position sticky not working with columns headers

html

css

position

sticky