CSS in Angular project: position: fixed not always functioning as expected - html

Question

I am having issues with my sticky table header in my angular 6 project.
I have a condition in my .ts file that applies the 'sticky' class only when the user scrolls towards a certain point in the page. That part works great. The issue is that when the position: fixed class is applied, it only works if top:0.
The css looks like this:
.sticky
{
position: fixed;
top:0;
width: 100%;
background-color: #fff;
padding-right: 20px!important;
}
But if I change top:0 to top:100, too account for the header of the webpage (that is build on another component) then the top:100 attribute won't apply and be considered invalid.
The html is a little tricky but looks a little like this
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>
I want the thead to stick right underneath the header that lives on a parent component, so it is still visible.
Why is that, and how can I get my position:fixed attribute to actually keep something at the top of the page?
Any help is greatly appreciated!

Answer 1

I wanted to post this by comment, but looks like I need at least 50 reputation to do so. So, here it goes:
But if I change top:0 to top:100 {...}
The unit of the top seems to be missing. You probably wanted to set it to 100px? Probably the 0 value confused you as it is allowed with or without a unit.
One more thing, the id of each element must be unique, but you have 3 id="content" there.
Alternative solution
You can use position: sticky css property on your thead element (and also on the respective th child elements). This way, you wouldn't need to handle the scroll event by yourself and let the css do the job for you.
Example:
I only include the scss part here, since the code snippets make the post unnecessarily long. You can see full example on 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; }
}
}