css顶部制作

固定顶部导航栏

使用position: fixed和top: 0将导航栏固定在页面顶部，确保滚动页面时导航栏始终可见。设置width: 100%让导航栏占据整个视口宽度，z-index属性确保导航栏在其他内容之上。

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

响应式顶部布局

通过媒体查询调整导航栏在不同屏幕尺寸下的表现。在小屏幕上隐藏部分元素或切换为汉堡菜单，确保用户体验一致。

@media (max-width: 768px) {
  .navbar {
    padding: 10px;
  }
  .nav-links {
    display: none;
  }
  .mobile-menu-btn {
    display: block;
  }
}

顶部渐变背景效果

使用CSS渐变属性为顶部区域添加视觉吸引力。线性渐变可以创建平滑的颜色过渡，增强页面设计感。

.header {
  background: linear-gradient(135deg, #6e8efb, #a777e3);
  color: white;
  padding: 2rem;
  text-align: center;
}

粘性顶部元素

对于需要在一定滚动位置后固定的元素，使用position: sticky。这种技术适合页眉在滚动过特定点后保持可见的情况。

.sticky-header {
  position: sticky;
  top: 0;
  background-color: rgba(255, 255, 255, 0.95);
  transition: background-color 0.3s ease;
}

顶部进度条指示器

创建页面滚动进度指示器，增强用户对阅读进度的感知。使用伪元素和transform属性实现平滑动画效果。

.progress-container {
  width: 100%;
  height: 4px;
  background: #f0f0f0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1001;
}

.progress-bar {
  height: 100%;
  background: #4CAF50;
  width: 0%;
  transition: width 0.1s ease;
}