如何用纯CSS实现导航栏固定顶部、标题随页面滚动

我当前布局中h1与nav均嵌套在header标签内，希望实现nav标签固定在页面顶部，而h1标签随页面滚动正常移动的效果。尝试为nav添加position: sticky;与top: 0;属性，但因nav在header内未能生效。请问能否仅用纯CSS实现该效果，还是需要借助JavaScript？

可以只用纯CSS实现，问题核心在于你给header设置了position: absolute——sticky元素的粘性定位是基于滚动容器生效的，而absolute定位的header脱离了文档流，本身不会随页面滚动，导致nav的sticky失去了参照容器，自然无法触发粘性效果。

以下提供两种可行的纯CSS方案：

方案一：调整header定位，让sticky正常生效 #

去掉header的position: absolute，让它回到正常文档流，这样nav的sticky就能基于整个页面的滚动触发：

html,
body {
    height: 100%;
    margin: 0;
}

#root {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

/* 移除absolute定位，让header回到文档流 */
header {
    left: 0;
    right: 0;
}

header h1 {
    text-align: center;
    margin: 0;
    padding: 20px 0;
}

nav {
    margin: 0 auto;
    position: sticky;
    top: 0;
    background: #fff; /* 添加背景避免被下方内容遮挡 */
    padding: 10px 0;
    width: 100%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

nav > ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;
    justify-content: center;
}

nav > ul li {
    margin: 0 10px;
}

nav > ul li a {
    color: #000000;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 1px;
}

nav > ul li a:hover {
    color: #bd8b4f;
}

main {
    flex: 1;
    min-height: 1500px;
    padding-top: 20px; /* 避免内容紧贴nav */
}

footer {
    padding: 40px 0;
    color: #ffffff;
    background-color: #683d29;
    text-align: center;
}

footer > div a {
    color: #ffffff;
    text-decoration: none;
}

footer > div a:hover {
    color: #683d29;
    background: #fff;
    padding: 2px 4px;
}

HTML结构保持不变即可，滚动页面时，h1会随页面向上移出视口，nav则会粘在顶部。

方案二：用fixed定位实现nav固定（保留header的absolute） #

如果必须保留header的position: absolute，可以给nav设置position: fixed，同时调整main的上边距避免内容被遮挡：

html,
body {
    height: 100%;
    margin: 0;
}

#root {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

header {
    position: absolute;
    left: 0;
    right: 0;
}

header h1 {
    text-align: center;
    margin: 0;
    padding: 20px 0;
}

nav {
    position: fixed; /* 改用fixed定位固定在顶部 */
    top: 0;
    left: 0;
    right: 0;
    background: #fff;
    padding: 10px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

nav > ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;
    justify-content: center;
}

nav > ul li {
    margin: 0 10px;
}

nav > ul li a {
    color: #000000;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 1px;
}

nav > ul li a:hover {
    color: #bd8b4f;
}

main {
    flex: 1;
    min-height: 1500px;
    padding-top: 120px; /* 上边距等于h1+nav的总高度，避免内容被遮挡 */
}

footer {
    padding: 40px 0;
    color: #ffffff;
    background-color: #683d29;
    text-align: center;
}

footer > div a {
    color: #ffffff;
    text-decoration: none;
}

footer > div a:hover {
    color: #683d29;
    background: #fff;
    padding: 2px 4px;
}

这种方案下，nav会一直固定在顶部，h1随页面滚动向上移出视口，同时main的上边距确保内容不会被遮挡。

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