css制作页面置顶

使用 position: fixed 实现置顶

将元素设置为固定定位，脱离文档流并相对于浏览器窗口定位。通过 top: 0 和 left: 0 确保元素位于页面顶部。

.sticky-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: white;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

使用 position: sticky 实现动态置顶

元素在滚动到特定位置时变为固定定位。需设置 top: 0 并确保父容器未隐藏溢出。

.sticky-element {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #f8f8f8;
}

通过 z-index 控制层级

置顶元素需设置较高的 z-index 值，避免被其他元素覆盖。通常范围在 1000-9999。

.header {
  z-index: 1000;
}

响应式适配

为移动端添加媒体查询，调整置顶元素的样式或隐藏部分内容。

@media (max-width: 768px) {
  .sticky-header {
    padding: 10px;
  }
}

滚动监听增强效果

结合 JavaScript 监听滚动事件，动态添加类名实现滚动时置顶效果。

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

.header.scrolled {
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  background: rgba(255,255,255,0.9);
}