如何创建在滚动时保持固定的粘性标题

pax大约 2 分钟

粘性标题是一种在页面滚动时保持固定在视口顶部的UI元素，常用于导航栏或重要信息展示。

实现方式

1. 使用 CSS `position: sticky`

这是最简单和现代的实现方式：

.sticky-header {
  position: sticky;
  top: 0;
  background: white;
  z-index: 100;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

2. JavaScript 动态控制

通过监听滚动事件动态切换定位方式：

window.addEventListener('scroll', function() {
  const header = document.querySelector('.header');
  if (window.scrollY > 100) {
    header.classList.add('fixed');
  } else {
    header.classList.remove('fixed');
  }
});

完整示例

以下是一个完整的粘性标题实现示例：

<!DOCTYPE html>
<html>
<head>
<style>
  body {
    margin: 0;
    font-family: Arial, sans-serif;
  }
  
  .sticky-header {
    position: sticky;
    top: 0;
    background: #333;
    color: white;
    padding: 1rem;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  }
  
  .content {
    height: 200vh; /* 创建足够长的内容用于滚动 */
    padding: 2rem;
    background: linear-gradient(to bottom, #f0f0f0, #e0e0e0);
  }
  
  /* 传统JavaScript方式 */
  .js-sticky {
    position: relative;
  }
  
  .js-sticky.fixed {
    position: fixed;
    top: 0;
    width: 100%;
  }
</style>
</head>
<body>
  <header class="sticky-header">
    <h1>粘性标题示例</h1>
    <nav>
      <a href="#home">首页</a> | 
      <a href="#about">关于</a> | 
      <a href="#contact">联系</a>
    </nav>
  </header>
  
  <div class="content">
    <h2>内容区域</h2>
    <p>向下滚动查看粘性标题效果...</p>
    <p>当标题触及页面顶部时，它将保持固定位置。</p>
    <!-- 更多内容 -->
  </div>

  <script>
    // JavaScript实现方式示例
    let lastScrollTop = 0;
    const jsStickyHeader = document.createElement('div');
    jsStickyHeader.className = 'js-sticky';
    jsStickyHeader.innerHTML = '<h2>JavaScript控制的粘性标题</h2>';
    jsStickyHeader.style.background = '#555';
    jsStickyHeader.style.color = 'white';
    jsStickyHeader.style.padding = '1rem';
    jsStickyHeader.style.display = 'none'; // 初始隐藏
    
    document.body.insertBefore(jsStickyHeader, document.body.firstChild);
    
    window.addEventListener('scroll', function() {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      
      // CSS sticky方式
      if (scrollTop > 300) {
        jsStickyHeader.style.display = 'block';
        jsStickyHeader.classList.add('fixed');
      } else {
        jsStickyHeader.style.display = 'none';
        jsStickyHeader.classList.remove('fixed');
      }
      
      lastScrollTop = scrollTop;
    });
  </script>
</body>
</html>

关键要点

CSS position: sticky：
- 最简单的实现方式
- 需要指定 top 值
- 元素在正常流中，直到达到指定位置才变为固定定位
兼容性考虑：
- 现代浏览器支持良好
- 对于老版本浏览器，需要使用JavaScript实现
性能优化：
- 使用CSS方式性能更好
- JavaScript方式需要节流处理滚动事件
样式处理：
- 添加 z-index 确保标题在其他元素之上
- 设置背景色遮挡滚动内容
- 可添加阴影增强视觉效果

这种技术广泛应用于网站导航、表格标题行、文章章节标题等场景。

如何创建在滚动时保持固定的粘性标题

粘性标题（Sticky Header）详解

实现方式

1. 使用 CSS position: sticky

2. JavaScript 动态控制

完整示例

关键要点

1. 使用 CSS `position: sticky`