实现无重叠的Position sticky效果：聊天日期粘滞重叠问题求助

问题核心是多个设置了sticky定位的日期元素会默认堆叠在同一顶部位置，加上动态加载无法用容器分组同日期消息，导致重叠。以下是两种适配场景的解决方案：

方案一：替换式sticky（完全匹配WhatsApp交互） #

同一时间仅让当前视口顶部的日期固定，滚动到下一个日期时自动替换顶部固定项，不会重叠。

实现代码 #

CSS

.chat-container {
  max-height: 500px;
  overflow-y: auto;
}

.date {
  position: relative;
  top: 0;
  padding: 8px;
  background: #f0f0f0;
  text-align: center;
  margin: 10px 0;
  z-index: 1;
}

.date.sticky {
  position: sticky;
  top: 0;
}

.message {
  padding: 10px;
  margin: 5px 0;
  background: #e5e5ea;
  border-radius: 8px;
  max-width: 70%;
}

JavaScript

// 初始化日期监听
function initStickyDates() {
  const dates = document.querySelectorAll('.date');
  const scrollContainer = document.querySelector('.chat-container');
  
  const observerOptions = {
    root: scrollContainer,
    rootMargin: '-1px 0px -100% 0px', // 日期顶部刚进入容器顶部时触发
    threshold: 0
  };

  const observerCallback = (entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        // 移除所有日期的sticky状态
        dates.forEach(date => date.classList.remove('sticky'));
        // 给当前进入顶部的日期添加sticky
        entry.target.classList.add('sticky');
      }
    });
  };

  const observer = new IntersectionObserver(observerCallback, observerOptions);
  dates.forEach(date => observer.observe(date));
  
  return observer;
}

// 动态添加新日期和消息时（模拟AJAX请求后追加）
function addNewChatContent() {
  const container = document.querySelector('.chat-container');
  const newDate = document.createElement('div');
  newDate.className = 'date';
  newDate.textContent = '2024-05-20';
  container.appendChild(newDate);

  const newMsg = document.createElement('div');
  newMsg.className = 'message';
  newMsg.textContent = '新消息内容';
  container.appendChild(newMsg);

  // 给新日期绑定监听
  const observer = initStickyDates();
  observer.observe(newDate);
}

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', initStickyDates);

原理 #

通过Intersection Observer监听每个日期元素的位置，当某个日期滚动到容器顶部时，仅给它添加sticky定位，同时取消其他日期的sticky状态，确保同一时间只有一个日期固定在顶部，完全避免重叠。

方案二：堆叠式sticky（保留所有固定日期） #

如果需要同时显示多个固定日期，可动态调整每个日期的top值，让后续日期固定在前一个日期的下方。

JavaScript

function adjustStickyOffsets() {
  const dates = document.querySelectorAll('.date');
  let prevHeight = 0;

  dates.forEach((date, index) => {
    date.style.top = `${prevHeight}px`;
    prevHeight += date.offsetHeight;
  });
}

// 动态添加元素后调用，同时监听窗口resize
window.addEventListener('resize', adjustStickyOffsets);
// 动态追加内容后执行：adjustStickyOffsets();

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