为何position: sticky在滚动出section后失效？

我的网站采用Section结构（同时作为导航锚点），给导航栏设置了position: sticky属性，但发现它只在当前Section（示例中的黄色区域）内生效，滚动到其他Section（绿色、蓝色区域）后就消失了。希望红色导航栏能在所有Section中保持显示。

问题根源 #

position: sticky的元素是相对于最近的滚动祖先生效的。当导航栏被包裹在第一个<section id="first">内部时，它的滚动边界被限制在这个Section里，一旦滚动到该Section外部，导航栏会跟着Section一起被移出视口。

解决方案 #

1. 调整HTML结构，将导航栏移出Section #

把<nav>元素从第一个Section中提取出来，直接作为<body>的子元素，让它的滚动祖先变为整个文档，这样就能在全局范围内保持sticky状态。

修改后的HTML：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!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>Document</title>
</head>
<body>
    <!-- 导航栏移到所有Section外面 -->
    <nav class="title-bar">
        <div class="logo">
            <img src="https://picsum.photos/200" alt="logo" id="logo">
            <h1 id="title"><a href=".">My Website</a></h1>
        </div>

        <div class="links">
            <a href="#first" class="selected">First</a>
            <a href="#second">Second</a>
            <a href="#third">Third</a>
        </div>
    </nav>

    <section id="first">
        <div class="div-1">
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vel mollitia tempora labore, ad laboriosam modi recusandae ipsam tempore quasi tenetur, veritatis, alias pariatur qui doloremque accusamus temporibus doloribus porro aperiam?</p>
            <img src="https://picsum.photos/200/300">
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. At maiores sunt voluptatum quas laboriosam, ducimus nesciunt ipsa quis, ullam rerum ipsam consectetur aperiam, mollitia totam aliquid sit exercitationem eius facilis?</p>
            <img src="https://picsum.photos/200/301">
        </div>
    </section>

    <section id="second">
        <div class="div-2">
            <img src="https://picsum.photos/200/302">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum quod, mollitia cumque quisquam itaque earum vel voluptatibus nesciunt quas provident inventore doloribus amet est possimus, consectetur maxime consequatur. Delectus, corporis?</p>
        </div>

        <div class="div-3">
            <img src="https://picsum.photos/200/303">
            <ul>
                <li>aaaa</li>
                <li>bbbb</li>
                <li>cccc</li>
                <li>dddd</li>
            </ul>
        </div>
    </section>

    <section id="third">
        <div class="div-2">
            <img src="https://picsum.photos/200/302">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum quod, mollitia cumque quisquam itaque earum vel voluptatibus nesciunt quas provident inventore doloribus amet est possimus, consectetur maxime consequatur. Delectus, corporis?</p>
        </div>

        <div class="div-3">
            <img src="https://picsum.photos/200/303">
            <ul>
                <li>aaaa</li>
                <li>bbbb</li>
                <li>cccc</li>
                <li>dddd</li>
            </ul>
        </div>
    </section>
</body>
</html>

2. 优化CSS（修复布局细节） #

原CSS中nav.title-bar > *的padding:20vh会导致导航栏内部元素间距过大，可调整为flex布局实现居中，同时给第一个Section添加上边距避免内容被导航栏遮挡：

body{
    margin: 0;
    box-sizing: border-box;
}

nav.sticky{
    background-color: blue;
    border-bottom: 10px solid black;
    /* 滚动后缩小导航栏高度，增强交互感 */
    height: 10vh;
}

nav img{
    width: 10vh;
}

nav.title-bar{
    background-color: red;
    position: sticky;
    top: 0;
    width: 100%;
    transition: 0.5s;
    height: 50vh;
    z-index: 10000;
    color: white;
    /* 用flex布局让内部元素垂直居中 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

/* 给第一个Section添加上边距，避免内容被导航栏遮挡 */
#first{
   background-color: yellow;
   padding-top: 1rem;
}

#second{
    background-color: green;
}

#third{
    background-color: blue;
}

/* 优化导航链接样式 */
.links a{
    color: white;
    margin: 0 1rem;
    text-decoration: none;
    font-size: 1.2rem;
}

3. 保留原有JS功能 #

原有的平滑滚动和sticky类切换逻辑无需修改，可直接使用：

$('.links a[href^="#"]').click(function (event) {
  event.preventDefault();
  const section =  document.querySelector(event.target.getAttribute("href"));
  section.scrollIntoView({
    behavior: "smooth"
  });
})

$(document).scroll(function () { 
  $("nav").toggleClass("sticky", window.scrollY > 0);
});

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