滚动上下时网格列粘性定位异常问题求助

问题场景 #

使用双列Grid布局，两列高度均超出视口且高度不一致。当左侧列高度大于右侧列时，期望实现：

• 向下滚动：右侧列内容触底后保持粘性，直到左侧列完全滚动到底部
• 向上滚动：右侧列内容触顶后保持粘性，直到左侧列完全滚动到顶部

当前仅实现了向下滚动的粘性效果，滚动到页面底部后向上滚动时，右侧列会固定在底部无法随之上移。

现有代码 #

CSS代码 #

.grid {
  display: grid;
  grid-template-columns: 200px 200px;
}

.content1 {
  height: 2000px;
  background: linear-gradient(red, blue);
}

.content2Container {
  display: flex;
  flex-direction: column;
}

.content2 {
  height: 1000px;
  border: solid 2px blue;
  position: sticky;
  bottom: 0px;
}

.flex {
  display: flex;
  flex-grow: 1;
}

HTML代码 #

<div class="grid">
  <div class="content1"></div>
  <div class="content2Container">
    <div class="flex"></div>
    <div class="content2">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut varius enim, commodo vehicula diam. Ut sagittis eu dolor ac tristique. Ut porta interdum magna non semper. Mauris a consequat quam, in rutrum diam. In felis enim, condimentum in ullamcorper
      ut, aliquam sed velit. Nunc pretium ante vel massa vestibulum vulputate. Pellentesque ex mauris, lacinia in ligula at, pellentesque tempor est. Nam efficitur nunc erat, ut ultrices diam euismod ege Lorem ipsum dolor sit amet, consectetur adipiscing
      elit. Quisque ut varius enim, commodo vehicula diam. Ut sagittis eu dolor ac tristique. Ut porta interdum magna non semper. Mauris a consequat quam, in rutrum diam. In felis enim, condimentum in ullamcorper ut, aliquam sed velit. Nunc pretium ante
      vel massa vestibulum vulputate. Pellentesque ex mauris, lacinia in ligula at, pellentesque tempor est. Nam efficitur nunc erat, ut ultrices diam euismod ege Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut varius enim, commodo
      vehicula diam. Ut sagittis eu dolor ac tristique. Ut porta interdum magna non semper. Mauris a consequat quam, in rutrum diam. In felis enim, condimentum in ullamcorper ut, aliquam sed velit. Nunc pretium ante vel massa vestibulum vulputate. Pellentesque
      ex mauris, lacinia in ligula at, pellentesque tempor est. Nam efficitur nunc erat, ut ultrices diam euismod ege
    </div>
  </div>
</div>

解决方案 #

问题根源在于仅设置了bottom: 0的粘性规则，无法响应向上滚动时的顶部粘性需求。通过监听滚动事件动态切换粘性定位属性，可实现双向粘性效果。

修改后的完整代码 #

CSS调整

.grid {
  display: grid;
  grid-template-columns: 200px 200px;
}

.content1 {
  height: 2000px;
  background: linear-gradient(red, blue);
}

.content2Container {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 确保容器高度至少覆盖视口 */
}

.content2 {
  height: 1000px;
  border: solid 2px blue;
  position: sticky;
  bottom: 0;
  transition: top 0.1s, bottom 0.1s; /* 优化切换流畅度 */
}

/* 顶部粘性样式 */
.content2.sticky-top {
  bottom: auto;
  top: 0;
}

.flex {
  display: flex;
  flex-grow: 1;
}

JavaScript逻辑

const content2 = document.querySelector('.content2');
const content2Container = document.querySelector('.content2Container');

window.addEventListener('scroll', () => {
  const containerRect = content2Container.getBoundingClientRect();
  const elementHeight = content2.offsetHeight;
  const viewportHeight = window.innerHeight;

  // 向上滚动：容器顶部进入视口且元素未完全显示时，切换为顶部粘性
  if (containerRect.top >= 0 && (containerRect.top + elementHeight) <= viewportHeight) {
    content2.classList.add('sticky-top');
  } 
  // 向下滚动：容器底部触达视口底部时，切换为底部粘性
  else if (containerRect.bottom <= viewportHeight) {
    content2.classList.remove('sticky-top');
  }
});

效果说明 #

• 向下滚动：右侧列容器底部触达视口底部时，content2保持bottom:0的粘性状态，直到左侧列完全滚动到底部。
• 向上滚动：右侧列容器顶部进入视口、且content2未完全显示时，自动切换为top:0的粘性状态，直到左侧列完全滚动到顶部。

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