根据高度切换滚动粘性定位：顶部或底部对齐方案

我需要实现一个双列布局，两列均支持滚动，具体交互逻辑如下：

• 当其中一列高度大于另一列时，较矮的列滚动至内容底部后固定，直至较高的列完成滚动
• 当某列高度小于视口高度时，该列需要固定在顶部，而非底部

当前实现的两种单一效果 #

效果1：高列场景下的底部固定（仅两列均高于视口时生效） #

以下代码可实现两列均高于视口时，矮列滚动到底部后固定的效果：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.stick-container {
  position: sticky;
  align-self: end;
  bottom: 0;
}

<div style="height: 100px"></div>

<div class="container">
  <div class="stick-container">
    <img src="https://images.unsplash.com/photo-1468487422149-5edc5034604f" style="height: 2500px; width: 100%"/>
  </div>
  <div class="stick-container">
    <img src="https://images.unsplash.com/photo-1507608616759-54f48f0af0ee" style="height: 1500px; width: 100%"/>
  </div>
</div>

<div style="background-color: beige; height: 500px; width: 100vw"></div>

效果2：矮列场景下的顶部固定 #

以下代码可实现矮列固定在顶部的效果，但无法与上述底部固定效果自动切换：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.stick-container {
  position: sticky;
  align-self: start; /* 修改处 */
  top: 0;  /* 修改处 */
}

<div style="height: 100px"></div>

<div class="container">
  <div class="stick-container">
    <img src="https://images.unsplash.com/photo-1468487422149-5edc5034604f" style="height: 2500px; width: 100%"/>
  </div>
  <div class="stick-container">
    <img src="https://images.unsplash.com/photo-1507608616759-54f48f0af0ee" style="height: 100px; width: 100%"/>
  </div>
</div>

<div style="background-color: beige; height: 500px; width: 100vw"></div>

问题 #

如何让布局自动在两种固定状态间切换？或者是否存在更优的CSS对齐样式，可直接实现这种自适应效果？

内容的提问来源于stack exchange，提问作者Codey