Bootstrap中position:sticky粘性菜单失效问题求助

问题描述 #

尝试了所有可行方法，但菜单的position:sticky属性仍无法生效。已确认不存在设置了overflow属性的父元素，且已为菜单设置top:30%样式。相关代码如下：

CSS代码 #

#games-container #pills-tab {
    -webkit-backdrop-filter: blur( 5px );
    backdrop-filter: blur( 5px );
    background: rgba( 30, 30, 30, 0.5 );
    border-radius: 10rem;
    border: 1px solid rgba( 255, 255, 255, 0.18 );
    height: fit-content;
    padding: 1rem;
    top: 30%;
    width: 60%;
}

#games-container .nav-item {
    padding: .5rem;
}

#games-container .nav-item .nav-link.active {
    background-color: #FFC85D;
    color: #1E1E1E;
}

#games-container .nav-item .nav-link {
    background-color: #545454;
    border-radius: 10rem;
    color: #FFFFFF;
    transition: .5s;
}

#games-container .nav-item .nav-link:hover {
    color: #1E1E1E;
}

HTML代码 #

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav nav-pills d-flex justify-content-around position-sticky mt-5 mb-5" id="pills-tab" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link active" id="pills-destaques-tab" data-bs-toggle="pill" data-bs-target="#pills-destaques" type="button" role="tab" aria-controls="pills-destaques" aria-selected="true">Destaques</button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-aventura-tab" data-bs-toggle="pill" data-bs-target="#pills-aventura" type="button" role="tab" aria-controls="pills-aventura" aria-selected="false">Aventura</button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-acao-tab" data-bs-toggle="pill" data-bs-target="#pills-acao" type="button" role="tab" aria-controls="pills-acao" aria-selected="false">Ação</button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-coop-tab" data-bs-toggle="pill" data-bs-target="#pills-coop" type="button" role="tab" aria-controls="pills-coop" aria-selected="false">Cooperativo</button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-fps-tab" data-bs-toggle="pill" data-bs-target="#pills-fps" type="button" role="tab" aria-controls="pills-fps" aria-selected="false">FPS</button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-luta-tab" data-bs-toggle="pill" data-bs-target="#pills-luta" type="button" role="tab" aria-controls="pills-luta" aria-selected="false">Luta</button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-rpg-tab" data-bs-toggle="pill" data-bs-target="#pills-rpg" type="button" role="tab" aria-controls="pills-rpg" aria-selected="false">RPG</button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-terror-tab" data-bs-toggle="pill" data-bs-target="#pills-terror" type="button" role="tab" aria-controls="pills-terror" aria-selected="false">Terror</button>
    </li>
</ul>
<div>
    <h1>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nam asperiores eum, sed odit minus facilis tenetur, fugit non quas nisi fugiat et? Hic in facilis distinctio saepe modi. Nisi, corporis!</h1>
</div>
<!-- 省略重复的Lorem ipsum内容 -->

问题根源 #

position:sticky生效的必要条件是元素必须设置top/bottom/left/right中的至少一个属性。你的代码中虽然在CSS里写了top:30%，但对应的选择器#games-container #pills-tab无法匹配到菜单元素——HTML中的菜单<ul id="pills-tab">并没有被id="games-container"的容器包裹，导致该样式规则完全不生效。

菜单上的Bootstrap类position-sticky确实会设置position:sticky，但缺少有效的top值，所以粘滞效果无法触发。

修复方案 #

方案1：修正CSS选择器 #

如果你的实际页面中菜单确实在#games-container内，只需确保HTML结构匹配即可；如果没有这个容器，直接修改CSS选择器为#pills-tab：

#pills-tab {
    -webkit-backdrop-filter: blur( 5px );
    backdrop-filter: blur( 5px );
    background: rgba( 30, 30, 30, 0.5 );
    border-radius: 10rem;
    border: 1px solid rgba( 255, 255, 255, 0.18 );
    height: fit-content;
    padding: 1rem;
    top: 30%; /* 现在该样式会正确应用到菜单 */
    width: 60%;
}

/* 其他样式同理，去掉#games-container前缀 */
.nav-item {
    padding: .5rem;
}

.nav-item .nav-link.active {
    background-color: #FFC85D;
    color: #1E1E1E;
}

.nav-item .nav-link {
    background-color: #545454;
    border-radius: 10rem;
    color: #FFFFFF;
    transition: .5s;
}

.nav-item .nav-link:hover {
    color: #1E1E1E;
}

方案2：添加内联样式快速验证 #

如果只是临时测试效果，可以直接给菜单元素添加内联top样式：

<ul class="nav nav-pills d-flex justify-content-around position-sticky mt-5 mb-5" id="pills-tab" role="tablist" style="top:30%">

额外验证点 #

除了上述修复，再确认两个常见的sticky失效场景：

• 菜单的所有父级元素没有设置overflow: hidden/scroll/auto（你已确认，可跳过）
• 菜单自身高度没有超过父级容器的高度，否则sticky不会触发粘滞效果

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