css制作页面置顶

固定定位实现置顶

使用CSS的position: fixed属性可以将元素固定在视口的顶部。设置top: 0确保元素紧贴顶部，width: 100%让元素占满宽度，z-index控制层级避免被其他元素覆盖。

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

粘性定位实现置顶

position: sticky能在元素到达视口顶部时固定位置。需指定top: 0并确保父容器有足够高度，适合长页面中部分区域置顶。

.sticky-header {
  position: sticky;
  top: 0;
  background-color: #f8f9fa;
  padding: 10px;
  z-index: 999;
}

避免内容被遮挡

置顶元素会覆盖下方内容，需为页面主体添加与置顶元素高度相同的上边距。

body {
  padding-top: 60px; /* 假设置顶栏高度为60px */
}

响应式处理

通过媒体查询调整置顶样式，确保在不同设备上显示正常。例如在小屏幕中减少高度或修改布局。

@media (max-width: 768px) {
  .header {
    height: 50px;
    padding: 5px;
  }
  body {
    padding-top: 50px;
  }
}

动态效果增强

结合CSS过渡或动画实现平滑的显示效果。例如滚动时隐藏/显示置顶栏。

.header {
  transition: transform 0.3s ease;
}
.header.hide {
  transform: translateY(-100%);
}

window.addEventListener('scroll', function() {
  const header = document.querySelector('.header');
  header.classList.toggle('hide', window.scrollY > 100);
});