如何实现滚动隐藏首个div且第二个div保持sticky并解决内容穿透问题

核心问题分析 #

滚动时内容穿透到sticky的第二个div上方，本质是sticky元素的堆叠层级低于下方滚动内容，或者sticky元素未设置不透明背景导致视觉穿透。

方案一：调整堆叠层级与背景色（最直接） #

给第二个div设置足够高的z-index，同时添加不透明背景色，确保它能覆盖下方滚动内容：

.second-div {
  position: sticky;
  top: 0; /* 必须设置top/bottom等定位值，sticky属性才会生效 */
  z-index: 100; /* 数值大于下方内容的z-index即可，可根据实际调整 */
  background-color: #ffffff; /* 替换为你需要的背景色，必须设置非透明值 */
}

注意：如果父容器设置了overflow: hidden，会导致sticky属性失效，需要先移除父容器的该属性。

方案二：JS辅助控制类名（更灵活） #

如果需要更精细的动画效果，比如第一个div的平滑隐藏，可以用JS监听滚动事件，动态添加类名：

.first-div {
  height: auto;
  transition: height 0.3s ease;
  overflow: hidden;
}
.first-div.hidden {
  height: 0;
}
.second-div {
  position: sticky;
  top: 0;
  background-color: #ffffff;
}

window.addEventListener('scroll', () => {
  const firstDiv = document.querySelector('.first-div');
  const scrollThreshold = firstDiv.offsetHeight;
  
  if (window.scrollY > scrollThreshold) {
    firstDiv.classList.add('hidden');
  } else {
    firstDiv.classList.remove('hidden');
  }
});

替代实现方式（不用sticky） #

如果sticky属性存在兼容性或层级冲突问题，可以用position: fixed替代，配合JS调整页面内容的margin-top：

.first-div {
  transition: height 0.3s ease;
  overflow: hidden;
}
.first-div.hidden {
  height: 0;
}
.second-div {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: #ffffff;
}
.content-wrapper {
  /* 初始margin-top等于第二个div的高度，避免fixed元素覆盖内容 */
  margin-top: 60px; 
}

const secondDiv = document.querySelector('.second-div');
const contentWrapper = document.querySelector('.content-wrapper');
// 初始化内容区的margin-top
contentWrapper.style.marginTop = `${secondDiv.offsetHeight}px`;

window.addEventListener('scroll', () => {
  const firstDiv = document.querySelector('.first-div');
  const scrollThreshold = firstDiv.offsetHeight;
  
  if (window.scrollY > scrollThreshold) {
    firstDiv.classList.add('hidden');
  } else {
    firstDiv.classList.remove('hidden');
  }
});

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