制作粘性头部（Sticky Header）是一种常见的网页设计技术，它使得页面的头部始终保持在浏览器窗口的顶部，无论用户滚动页面多远。可以使用 CSS 的 position: sticky 属性来实现粘性头部。以下是一个简单的示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticky Header Example</title>
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
  }
  .header {
    background-color: #333;
    color: #fff;
    padding: 10px 0;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 1000; /* 保证头部始终在顶部 */
  }
  .content {
    padding: 20px;
    height: 2000px; /* 用于测试滚动效果 */
    background-color: #f2f2f2;
  }
</style>
</head>
<body>

<div class="header">
  <h1>Sticky Header</h1>
</div>

<div class="content">
  <h2>Scroll down to see the sticky header effect!</h2>
  <!-- 这里可以放置页面内容 -->
</div>

</body>
</html>

在这个示例中：

.header 类表示头部元素。
position: sticky; 属性使得头部元素在其父容器内滚动时保持在顶部。
top: 0; 将头部元素固定在视口的顶部。
z-index: 1000; 确保头部元素始终在页面的顶部。
这样，无论用户滚动页面多远，头部都会始终保持在页面的顶部。

版权属于：泽泽社长
本文链接：https://blog.zezeshe.com/archives/ing-css.html
本站未注明转载的文章均为原创，并采用 CC BY-NC-SA 4.0 授权协议，转载请注明来源，谢谢！