Html 角度项目中的CSS：位置：修复了不总是按预期运行的问题

在angular 6项目中，我的粘性表格标题有问题

我的.ts文件中有一个条件，只有当用户向页面中的某个点滚动时，才会应用“sticky”类。那部分效果很好。问题是，当应用position:fixed类时，它仅在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>

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

app.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>

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

我希望thead粘贴在父组件上的标题的正下方，这样它仍然可见

为什么会这样？我如何才能得到我的位置：fixed属性，从而在页面顶部保留某些内容

---

非常感谢您的帮助

我想通过评论发表这篇文章，但看起来我至少需要50%的声誉。那么，下面是：

但是如果我把top:0改为top:100{…}

顶部的

部分似乎缺失。您可能想将其设置为

100px

？可能是

0

值让您感到困惑，因为它允许带或不带装置

还有一件事，每个元素的id必须是唯一的，但是您有3个

id=“content”

---

替代解决方案

您可以在

thead

元素（以及相应的

th

子元素）上使用

position:sticky

css属性。这样，您就不需要自己处理滚动事件，而让css为您完成这项工作

例如：

我在这里只包括scss部分，因为代码片段会使文章变得不必要的长。您可以在上看到完整的示例

thead{
位置：粘性；
顶部：0px；
tr{
位置：粘性；顶部：0；
/*顶部值可根据的高度进行调整*/
&：n子（1）th{位置：粘滞；顶部：110px；}
&：n子（2）th{位置：粘滞；顶部：132px；}
}
}

我想你在找

职位：sticky

<代码>已修复将其相对于视口定位，这听起来不像是您所追求的。