如何实现组件标题在整页Sticky，而非仅组件范围内？

方法一：CSS Sticky + 结构调整（推荐） #

默认position: sticky的生效范围是父元素的可视区域，要让标题在整个页面保持sticky，需让标题的直接父容器是页面的滚动容器（比如body或main），而非组件自身的容器。

实现步骤： #

1. 调整组件结构，将标题从组件内部移出，放到页面层级容器中：

<!-- 页面层级的标题 -->
<h2 class="page-sticky-title">我的组件标题</h2>
<!-- 原组件仅保留描述模块 -->
<div class="component">
  <div class="component-description">
    这里是组件的描述内容，不会跟随标题固定...
  </div>
</div>

2. 给标题添加CSS样式：

.page-sticky-title {
  position: sticky;
  top: 0; /* 若页面有导航栏，可设为导航栏高度，比如top: 60px */
  background-color: #fff; /* 必须设置背景色，避免被下方内容穿透 */
  z-index: 10; /* 确保标题在其他内容上方 */
  padding: 1rem 0; /* 可选，调整标题内边距 */
}

优点：纯CSS实现，性能好，无需JS监听滚动；缺点：需要调整组件DOM结构，若组件已封装无法修改则不适用。

方法二：JS动态固定（适用于无法修改组件结构的场景） #

如果不能调整组件结构，可通过监听页面滚动，动态给标题添加/移除固定样式。

实现步骤： #

1. 保留原组件结构：

<div class="component">
  <h2 class="component-title" id="sticky-title">我的组件标题</h2>
  <div class="component-description">
    这里是组件的描述内容，不会跟随标题固定...
  </div>
</div>

2. 添加基础CSS：

/* 固定状态的标题样式 */
.component-title.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  z-index: 10;
  padding: 1rem; /* 与原标题样式保持一致 */
}

/* 标题固定后，给描述模块添加上边距，避免内容上移被遮挡 */
.component-description.offset {
  padding-top: 60px; /* 值等于标题的高度 */
}

3. 添加JS逻辑：

const stickyTitle = document.getElementById('sticky-title');
const description = document.querySelector('.component-description');
const titleOffsetTop = stickyTitle.offsetTop;
const titleHeight = stickyTitle.offsetHeight;

// 防抖函数优化滚动监听性能
function debounce(func, delay = 10) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, arguments), delay);
  };
}

// 监听滚动事件
window.addEventListener('scroll', debounce(() => {
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  
  if (scrollTop >= titleOffsetTop) {
    stickyTitle.classList.add('fixed');
    description.classList.add('offset');
  } else {
    stickyTitle.classList.remove('fixed');
    description.classList.remove('offset');
  }
}));

注意事项：

• 若页面有动态加载内容，需在内容加载完成后重新计算titleOffsetTop和titleHeight；
• 标题的固定样式需与原样式保持视觉统一，避免突兀。

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