Sticky Navbar滚动至蓝色区域后失效消失的问题求助

问题根源 #

1. HTML结构不规范：nav标签放在body外面，不符合HTML标准，浏览器渲染时会出现布局异常。
2. Body定位限制：body设置了position: absolute和height: 100%，导致其高度被固定为视口高度，无法随内容扩展，滚动逻辑混乱。
3. Section高度设置：.body-page用height:100%，会继承body的固定高度，进一步限制页面滚动范围。

解决方案 #

1. 修正HTML结构 #

将nav标签移动到body内部，放在所有内容之前：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Elsa Frankel | Portfolio</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav id="navbar">
        <h1>My Name</h1>
        <div id="nav-buttons">
            <a href="#home">Home</a>
            <a href="#projects">Projects</a>
            <a href="#resoucres">Resources</a>
            <a href="#consulting">Consulting</a>
        </div>
        <div id="socials">
            <a href="" id="linkedin">icon</a>
            <a href="" id="tiktok">icon</a>
            <a href="" id="email">icon</a>
        </div>
    </nav>
    <div class="body-page" id="home">
        <div class="inner-container">
            <div class="home-section" id="academic">
                <img class="home-img" id="">
            </div>
            <div class="home-section" id="professional">
                <img class="home-img" id="">
            </div>
        </div>
    </div>
    <div class="body-page" id="projects">
        <div class="inner-container">
            <div class="projects-section" id="">
                <img class="projects-img" id="">
            </div>
            <div class="projects-section" id="">
                <img class="projects-img" id="">
            </div>
            <div class="projects-section" id="">
                <img class="projects-img" id="">
            </div>
        </div>
    </div>
    <div class="body-page" id="resources">
        <div class="inner-container">
            <div class="resources-section" id="college-students">
                <img class="resources-img" id="">
            </div>
            <div class="resources-section" id="high-school-students">
                <img class="resources-img" id="">
            </div>
            <div class="resources-section" id="misc">
                <img class="resources-img" id="">
            </div>
        </div>
    </div>
    <div class="body-page" id="consulting">
        <div class="inner-container">
            <div class="consulting-section" id="">
                <img class="consulting-img" id="">
            </div>
            <div class="consulting-section" id="">
                <img class="consulting-img" id="">
            </div>
            <div class="consulting-section" id="">
                <img class="consulting-img" id="">
            </div>
            <div class="consulting-section" id="">
                <img class="consulting-img" id="">
            </div>
        </div>
    </div>
</body>
</html>

2. 调整Body的CSS设置 #

移除body的绝对定位和固定高度，改用min-height:100vh确保基础高度，同时允许内容扩展：

body {
    width: 100%;
    min-height: 100vh;
    font-family: "Outfit", sans-serif;
}

3. 修改Section的高度设置 #

将.body-page的height:100%改为min-height:100vh，确保每个section至少占满视口，同时支持内容溢出：

.body-page {
    min-height: 100vh;
    width: 100%;
    background-color: brown;
}

原理说明 #

• 规范的HTML结构确保浏览器正确识别元素层级，sticky定位的父容器恢复为body，滚动时能正常触发固定效果。
• min-height:100vh让元素高度自适应内容，避免固定高度导致的滚动范围受限，确保sticky导航在整个页面滚动过程中保持在顶部。

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