如何修复CSS Sticky Navbar失效问题？滚动超Header后Navbar消失

问题原因 #

你的nav元素嵌套在高度为100vh的#header容器中，而粘性定位（sticky）元素仅会在其父容器的滚动范围内保持粘性状态。当#header完全滚出视口后，作为子元素的nav会跟随父容器一起离开视口，导致隐藏。

解决方案 #

将nav元素从#header容器中移出，放到页面最外层，让它的父容器变为整个文档（<body>），这样就能在整个页面滚动过程中保持粘性。

修改后的HTML代码 #

<!-- 将nav移至header外部 -->
<nav>
    <div class="container">
        <img src="/img/logo.png" class="logo" alt="" />
        <ul id="sidemenu">
            <li><a href="#header">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#contact">Contact</a></li>
            <i class="fa-solid fa-square-xmark" onclick="closeMenu()"></i>
        </ul>
        <i class="fa-solid fa-bars" onclick="openMenu()"></i>
    </div>
</nav>

<div id="header">
    <div class="container">
        <div class="header-text">
            <p>Software Developer</p>
            <h1>Hi, I am <span>xyz</span> </br> from India</h1>
        </div>
    </div>
</div>
<div id="about">
    <div class="container">
        <div class="row">
            <div class="about-col-1">
                <img src="/img/me.png" alt="">
            </div>
            <div class="about-col-2">
                <h1 class="sub-title">About Me</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam
                    aspernatur earum tempora, adipisci consequatur ea temporibus quidem animi excepturi
                    est assumenda, eius debitis et deleniti accusamus reprehenderit deserunt labore!
                    Repellendus magnam cumque commodi corporis cum vel architecto sed. Quam laudantium
                    possimus doloribus cumque voluptatum placeat vero aut non libero a?</p>
                <div class="tab-titles">
                    <p class="tab-links active-link" onclick="opentab('skills')">Skills</p>
                    <p class="tab-links" onclick="opentab('experience')">Experience</p>
                    <p class="tab-links" onclick="opentab('education')">Education</p>
                </div>
                <div class="tab-contents active-tab" id="skills">
                    <ul>
                        <li><span>Software Dev</span></br>Fullstack Developer</li>
                        <li><span>Software Dev</span></br>Fullstack Developer</li>
                        <li><span>Software Dev</span></br>Fullstack Developer</li>
                    </ul>
                </div>
                <div class="tab-contents" id="experience">
                    <ul>
                        <li><span>2021 - 2022</span></br>Fullstack Developer</li>
                        <li><span>2021 - 2022</span></br>Fullstack Developer</li>
                        <li><span>2020 - 2021</span></br>Fullstack Developer</li>
                    </ul>
                </div>
                <div class="tab-contents" id="education">
                    <ul>
                        <li><span>2021 - 2022</span></br>Fullstack Developer</li>
                        <li><span>2021 - 2022</span></br>Fullstack Developer</li>
                        <li><span>2020 - 2021</span></br>Fullstack Developer</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

修改后的CSS代码 #

调整nav的样式以适配新的布局：

#header {
  width: 100%;
  height: 100vh;
  background-image: url(/img/pp-desktop.png);
  background-size: cover;
  background-position: center;
}

.container {
  padding: 10px 10%;
}

.logo {
  width: 80px;
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  position: -webkit-sticky; /* Safari 兼容 */
  position: sticky;
  top: 0;
  z-index: 100; /* 提高层级避免被其他元素覆盖 */
  background-color: #fff; /* 添加背景色防止内容穿透 */
  width: 100%;
}

nav ul li {
  display: inline-block;
  list-style: none;
  margin: 10px 20px;
}

关键调整说明 #

• 移除nav的align-self: flex-start属性，因为它不再是flex容器的子元素
• 给nav添加width: 100%确保占满整个视口宽度
• 提升z-index值，防止滚动时被下方内容遮挡
• 添加背景色（可根据页面风格调整），避免滚动时下方内容透过导航栏显示

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