Angular项目中的CSS：位置：已修复，并非始终能按预期运行

Question

我的angular 6项目中的粘滞表标题出现问题。

我的.ts文件中有一个条件，只有当用户滚动到页面中的特定点时，该条件才应用'sticky'类。这部分效果很好。问题在于，当应用position：固定类时，仅当top：0时才有效。CSS看起来像这样：

.sticky
    {
        position: fixed;
        top:0;
        width: 100%;
        background-color: #fff;
        padding-right: 20px!important;

    }

但是如果我将top：0更改为top：100，也要考虑该网页的标头（在另一个组件上构建），那么top：100属性将不适用，并被视为无效。

html有点棘手，但看起来有点像这样

child.component.html

<div>
  <navigation></navigation>
  <div>
  </div>
  <div class="table-responsive " >
        <table id="tabletop" #tabletop class="table scroll">
            <thead #stickyMenu [class.sticky]="sticky">
                 <tr id="content" class="row1">
                 <tr id="content" class="row2">
                 <tr id="content" class="row3">
            </thead>
       </table>
  </div>
</div>

app.component.html

<header></header>
  <app-child></app-child>
<footer></footer>

我希望thead粘贴在父组件上的标题下面，因此它仍然可见。

这是为什么，如何获取我的position：fixed属性以将某些内容实际保留在页面顶部？

非常感谢您的帮助！

Answer 1

我想发表评论，但看来我需要至少50名声誉。因此，它就在这里：

但是如果我将top：0更改为top：100 {...}

unit的top似乎丢失。您可能想将其设置为100px？可能是0值使您感到困惑，因为允许或不使用单位。

还有一件事，每个元素的ID必须唯一，但是那里有3个id="content"。

---

替代解决方案>>

您可以在position: sticky元素（以及相应的thead子元素）上使用th css属性。这样，您就无需自己处理滚动事件，而让CSS为您完成这项工作。

示例：

我仅在此处包括scss部分，因为代码段使帖子过长。您可以在stackblitz.com上看到完整的示例。

thead {
    position: sticky; 
    top: 0px;

    tr {
      position: sticky; top: 0; 

      /* the top value can be adjusted according to <header>'s height */
      &:nth-child(1) th { position: sticky; top: 110px; }   
      &:nth-child(2) th { position: sticky; top: 132px; }
    }
}