如何让粘性Header碰到另一个粘性元素时取消其粘性定位

这个需求完全可以实现，核心思路是通过监听页面滚动事件，动态判断header和目标sticky元素的位置关系，进而修改header的定位属性，达成堆叠滚动的效果。

实现步骤与代码示例 #

1. 基础样式设置

先给元素设置初始样式，header默认使用position: sticky固定在顶部，.sticky元素也设置粘性定位，等待滚动触发：

#site-header {
  position: sticky;
  top: 0;
  height: 60px;
  background: #2c3e50;
  color: white;
  padding: 0 20px;
  line-height: 60px;
  z-index: 10;
  transition: position 0s; /* 避免切换定位时的动画闪烁 */
}

.sticky {
  position: sticky;
  top: 0;
  height: 80px;
  background: #e74c3c;
  color: white;
  padding: 0 20px;
  line-height: 80px;
  z-index: 5;
}

/* 给中间的div设置高度，方便滚动测试 */
main div:not(.sticky) {
  height: 500px;
  background: #ecf0f1;
  margin: 20px 0;
}

2. JavaScript滚动监听逻辑

通过getBoundingClientRect()获取元素的视口位置，判断.sticky元素的顶部是否即将接触到header的底部，动态修改header的定位属性：

const header = document.getElementById('site-header');
const stickyDiv = document.querySelector('.sticky');

// 防抖函数，避免滚动事件频繁触发
function debounce(func, wait) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), wait);
  };
}

function handleScroll() {
  const headerRect = header.getBoundingClientRect();
  const stickyRect = stickyDiv.getBoundingClientRect();
  
  // 当sticky元素的顶部距离视口顶部的距离小于等于header的高度时，切换header为relative
  if (stickyRect.top <= headerRect.height) {
    header.style.position = 'relative';
  } else {
    // 滚动回上方时，恢复header的sticky定位
    header.style.position = 'sticky';
  }
}

// 绑定防抖后的滚动事件监听
window.addEventListener('scroll', debounce(handleScroll, 10));

3. 完整HTML结构

<header id="site-header">页面顶部Header</header>
<main>
  <div>第一块内容区域</div>
  <div>第二块内容区域</div>
  <div class="sticky">要堆叠的Sticky元素</div>
  <div>第三块内容区域</div>
  <div>第四块内容区域</div>
</main>

关键逻辑说明 #

• 使用getBoundingClientRect()获取元素在视口中的位置信息，top表示元素顶部到视口顶部的距离，height是元素自身高度。
• 防抖函数用于减少滚动事件的触发频率，提升性能。
• 给header添加transition: position 0s是为了避免切换定位属性时出现不必要的布局闪烁。

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