position: sticky 固定两列

要将两列固定在页面上，您可以使用position: sticky属性。这个属性可以将元素固定在其父元素内，但只在滚动到特定位置时才生效。

首先，您需要创建包含两列的父容器。然后，为每个列添加相应的样式。

HTML结构示例：

<div class="container">
  <div class="column1">Column 1</div>
  <div class="column2">Column 2</div>
</div>

CSS样式示例：

.container {
  display: flex;
}

.column1 {
  width: 200px;
  height: 100vh; /* 设置高度，确保内容可以滚动 */
  position: sticky;
  top: 0; /* 在顶部固定 */
}

.column2 {
  width: 300px;
  height: 100vh; /* 设置高度，确保内容可以滚动 */
  position: sticky;
  top: 0; /* 在顶部固定 */
}

这样，当您滚动页面时，两列将保持固定在顶部。您可以根据需要调整列的宽度、高度和其他样式。