在我的网站上，我有一个全屏标题，其中带有导航栏。两者都包含文本，图标等的组合，并显示在“主要内容”部分上方。我可以添加类.p-X要么#splash或#nav（X =页码，例如.p-1对于第1页（URL INDEX/page/1）和.p-2用于第2页（URL INDEX/page/2）），以便同时显示#splash和#nav页1，但隐藏#splash，并且仍然显示#nav在页面上2+。最有效的方法是什么？CSS和jQuery解决方案还可以。我试过的知名度答案在这里和JJJ的选择在这里（威力我-我误后者虽然）。谢谢！
编辑：当前接受的答案不允许我保留#nav上的弯曲边缘（#splash的图像和#nav的顶部边缘之间存在空白）。我可以删除它，但是我想知道是否有一种方法可以保留它。
#splash {
width: 100%;
height: 100vh;
background:#e00;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.icon {
width: 128px;
height: 128px;
background: #ddd;
margin: auto 0 0.5rem 0;
}
#splash .info {
max-width: 700px;
margin: 0 auto auto auto;
background: #ddd;
}
#nav {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
justify-content: space-evenly;
width: 100%;
height: 40px;
background: #000;
color: #fff;
z-index: 5;
border-radius: 30% 30% 0% 0%; /* curved top if #splash is shown; curved bottom if not */
}
#content {
height: 100vh;
overflow-x: hidden:
overflow-y: auto;
background: #ccc;
} <section id="splash" class="p-X">
hide this on pages not 1
<div class="icon">hide this on pages not 1</div>
<div class="info">hide this on pages not 1</div>
<section id="nav">
sticks to top via JS when #splash is scrolled out/not displayed; display this on every page
</section>
</section>
<section id="content">
scrollable main content; display new content on different pages
</section>隐藏父元素时，不可能显示该元素的子元素。
尝试将#nav从#sp中移出，使其不再是#nav的子级。然后，要获得相同的外观，请将#nav放在标记中的#splash后面并使用，#nav { background-color: transparent }以便您可以看到下面的主要内容，还#splash {height: calc(100vh - HEIGHTOF#NAV)}可以使#nav固定在底部。
在JS中设置滚动位置规则，使其作用于#nav而不是#splash。
现在，您可以自由隐藏或显示#splash部分，而不会影响#nav
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句