如何仅用CSS为非嵌套元素实现position:sticky固定效果？

我希望将顶部导航栏与Logo同时固定在页面顶部，目前导航栏通过position:sticky属性已成功实现固定效果，但Logo位于另一个非嵌套的div容器中（受现有页面元素限制）。现有布局包含大量内容，移动Logo所在的div会需要大量重构工作，请问仅使用CSS如何让该Logo也实现固定效果？

现有代码 #

HTML代码 #

<!-- TOP ROW -->        
<div class="header-row sticky">
  header row here
</div>
    
<!-- LOGO & NAV --> 
<div class="nav-logo-area">
  This height set because nav menus and other content will go here.
  <div class="logo sticky">
    <img src="https://www.freepnglogos.com/uploads/twitter-logo-png/twitter-bird-symbols-png-logo-0.png" alt="Logo" />
  </div>
</div>
    
<!-- MAIN CONTENT & BELOW -->   
<div class="content-area">
  Some main content here. Added some height to the div to we can see the scroll action.
</div>

CSS代码 #

.sticky {position: sticky; top: 0; }

.header-row {
  width: 100%;
  height: 35px;
  margin-top:55px;
  color: #FFF;
  background-color: #1c1209;
  border-bottom: 1px dashed #FFF;    
}

.nav-logo-area {background-color: #076064; height: 200px; transform: none;}
.logo {  width: 111px; margin: 0 auto;}

.content-area {background-color: #ACE0D5; min-height:1200px; height: 1200px;}

解决方案 #

核心思路是将Logo改为position: fixed（相对于视口固定），同时调整位置避免被导航栏遮挡，再通过伪元素填补Logo脱离文档流后留下的空白，无需修改HTML结构：

1. 修改.logo的样式，替换sticky为fixed并设置定位参数：

.logo {
  width: 111px;
  position: fixed;
  top: 35px; /* 与顶部导航栏高度一致，避免被遮挡 */
  left: 50%;
  transform: translateX(-50%); /* 保持水平居中 */
}

2. 给.nav-logo-area添加伪元素，填补Logo脱离文档流后的空白：

.nav-logo-area::before {
  content: "";
  display: block;
  height: 111px; /* 与Logo高度一致，维持原布局 */
}

3. 移除.logo上的sticky类（因为已经改用fixed定位），最终完整CSS代码如下：

.sticky {position: sticky; top: 0; }

.header-row {
  width: 100%;
  height: 35px;
  margin-top:55px;
  color: #FFF;
  background-color: #1c1209;
  border-bottom: 1px dashed #FFF;    
}

.nav-logo-area {
  background-color: #076064; 
  height: 200px; 
  transform: none;
}
.nav-logo-area::before {
  content: "";
  display: block;
  height: 111px;
}

.logo {
  width: 111px;
  position: fixed;
  top: 35px;
  left: 50%;
  transform: translateX(-50%);
}

.content-area {background-color: #ACE0D5; min-height:1200px; height: 1200px;}

修改后，顶部导航栏通过sticky固定，Logo通过fixed固定在导航栏下方，两者都会保持在页面顶部，且无需调整原有HTML结构。

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