我正在尝试实现一些不确定是否可能的东西。请注意,我正在寻找仅使用CSS的解决方案,我知道我可以用JS解决这个问题,但我不想这样做。
考虑以下代码片段:https://codepen.io/fchristant/pen/PjoKOq
第二个导航栏(深色)是粘性的,当您向下滚动时,它将固定在视口的顶部。第一个导航栏(浅色)不具有粘性,它只会滚动离开。
然而,那个浅色导航栏有一个粘性的子元素。其想法是父级将滚动消失,但子元素仍然保持粘性,有效地与第二个导航栏(粘性的)融合。
然而,这并不起作用。因此,我的问题是:是否有可能在非粘性父元素内拥有一个粘性子元素?
HTML:
<div class="site_header">
Site header
<div class="site_header_child">
sticky
</div>
</div>
<div class="site_nav">
Site header
</div>
CSS:
.site_header {
display:flex;
position:relative;
width:100%;
padding:10px;
background:#eee;
}
.site_header_child {
border:1px solid red;
margin-left:auto;
position:sticky;
z-index:2;
top:0;
right:20px;
}
.site_nav {
display: block;
position:sticky;
padding:10px;
background:#333;
color:#fff;
position:sticky;
z-index:1;
top:0;
}