css - 如何在 Angular 8 应用程序嵌套组件中实现多个粘性标题和一个滚动条？

Question

我们如何在 Angular 应用程序的嵌套组件中应用粘性标题但只有一个/主滚动条？

应用模板布局的示例是：

                                 // main component / body
 <div class="app-container">
    
   <div class="header-0">   header text    </div>
   <div class="content-0">   some content   </div>

   <nested-component-1></nested-component-1>

 </div>

                                 // <nested-component-1> 
                                 // - 1st nested component inside of: main component
 <div class="container">
    
   <div class="header-1">   header text    </div>
   <div class="content-1">   some content   </div>

   <nested-component-2></nested-component-2>

 </div>

                                 // <nested-component-2> 
                                 // - 2nd nested component inside of: <nested-component-1>
 <div class="container">
    
   <div class="header-2">   header text    </div>
   <div class="content-2">   some content   </div>

   <nested-component-3></nested-component-3>

 </div>
                                 // etc.

我不希望每个组件都有一个滚动条——只有主要的。我希望每个嵌套子组件 0、1、2 ... 的标题在彼此下方堆叠并保持可见/粘性并让内容向上滚动。

如果所有内容都在一个带有 CSS 的模板中，这很容易：

div.sticky {
    top: X;
    z-index: Y;
    position: fixed;
    position: sticky;
    position: -webkit-sticky;
}

但是，内容的业务逻辑需要子组件，这阻碍了这种方法。如何解决？

标签： cssangular