如何使用Media Query实现固定(fixed)/粘性(sticky)导航栏(Navbar)

要让导航栏在页面滚动时始终可见，你可以用fixed或sticky定位，结合媒体查询可以针对不同屏幕尺寸调整定位逻辑，以下是具体修改方案：

核心原理 #

• fixed定位：导航栏固定在视口顶部，完全脱离文档流，始终保持在视野中，需要处理内容遮挡问题。
• sticky定位：导航栏默认跟随页面滚动，当滚动到视口顶部时自动固定，不会脱离文档流，无需额外处理内容遮挡。

修改后的完整代码 #

CSS 样式 #

.navbar {
    background-color: #111;
    padding: 12px 16px;
    /* 默认桌面端用fixed定位，铺满视口顶部 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* 确保导航栏在其他内容上方，避免被覆盖 */
}

/* 给body添加上内边距，防止内容被fixed导航栏遮挡 */
body {
    padding-top: 60px; /* 数值根据导航栏实际高度调整，可自行测试 */
}

.navbar ul {
    list-style-type: none;
    text-align: center;
    display: flex;
    justify-content: center; /* 让导航项水平居中 */
    margin: 0;
    padding: 0;
}

.navbar li a {
    color: #ccc;
    text-decoration: none;
    padding: 8px 16px;
    margin-left: 20px;
}

/* 移动端媒体查询（屏幕宽度≤700px） */
@media screen and (max-width: 700px) {
    /* 移动端切换为sticky定位，更适配垂直布局 */
    .navbar {
        position: sticky;
        top: 0;
        width: auto; /* 取消全屏宽度，继承父容器宽度 */
    }

    /* 移动端不需要body内边距，因为sticky不会脱离文档流 */
    body {
        padding-top: 0;
    }

    .navbar ul {
        flex-direction: column;
        padding: 20px;
        gap: 10px; /* 用gap替代margin，更灵活控制垂直间距 */
    }

    .navbar li a {
        margin: 5px 0;
        width: 30%;
        display: inline-block; /* 让width属性生效 */
        margin-left: 0; /* 取消左侧margin，适配垂直布局 */
    }
}

HTML 结构（无需修改，保持你的原有代码即可） #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Portfolio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="navbar">
    <ul>
        <li><a href="" class="">Home</a></li>
        <li><a href="" class="">About Me</a></li>
        <li><a href="" class="">My Skills</a></li>
        <li><a href="" class="">Services</a></li>
        <li><a href="" class="">Certificates</a></li>
    </ul>
</div>

<!-- 可添加更多内容测试滚动效果 -->
<div style="height: 1500px; padding: 20px; color: #333;">
    滚动页面查看导航栏效果...
</div>

</body>
</html>

关键注意事项 #

1. z-index设置：必须给导航栏设置足够大的z-index（比如1000），避免被其他页面元素覆盖。
2. fixed定位的内容遮挡：fixed会脱离文档流，因此必须给body或第一个内容块添加padding-top，数值要匹配导航栏的高度。
3. sticky定位的生效条件：sticky元素的父容器不能设置overflow: hidden，否则无法触发固定效果。
4. 媒体查询中的属性覆盖：在媒体查询里重新定义position属性时，要注意重置相关属性（比如width、padding-top），避免继承桌面端的样式冲突。

内容的提问来源于stack exchange，提问作者Dprvd