如何在滚动时使引导列保持粘性

Question

我想创建一个类似Twitter's FAQ 的常见问题解答页面。即使用户继续滚动，左列也会保持在该位置。

到目前为止，这是我所做的，但它不起作用。

    <template>
      <div>header here</div>
      <div class="container">
        <div class="row">
          <div class="col-lg-4">
            <div style="position: sticky;">
              1 of 2
            </div>
          </div>
          <div class="col-lg-8">
            2 of 2
          </div>
        </div>
      </div>
    </template>

根据this，我们应该添加sticky属性，但它不起作用。

编辑：我认为这是因为两列具有相同的高度，所以添加sticky 属性不起作用。关于如何使列高仅适合内容的任何解决方案？

有什么解决办法吗？谢谢！！

Answer 1

位置 Sticky 不适用于 col-sm-4，因为它的父类 row 具有 display:flex 属性。如果你改变了

display:flex

到

display:block

然后定位 Sticky 属性将起作用，但它会改变您的设计