Fixed Headers on Scroll Inst Working Correctly in Angular Application

table {    width: 100%;}
thead, tbody, tr, td, th { display: block; }
tr:after {    content: ' ';    display: block;    visibility: hidden;    clear: both;}
thead th {    height: 30px;
    /*text-align: left;*/}
tbody {    height: 120px;    overflow-y: auto;}
thead {    /* fallback */}

tbody td, thead th {    width: 19.2%;    float: left;}

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-striped">    <thead>        <tr>            <th>Make</th>            <th>Model</th>            <th>Color</th>            <th>Year</th>        </tr>    </thead>    <tbody>        <tr>            <td class="filterable-cell">Ford</td>            <td class="filterable-cell">Escort</td>            <td class="filterable-cell">Blue</td>            <td class="filterable-cell">2000</td>        </tr>        <tr>            <td class="filterable-cell">Ford</td>            <td class="filterable-cell">Escort</td>            <td class="filterable-cell">Blue</td>            <td class="filterable-cell">2000</td>        </tr>        <tr>            <td class="filterable-cell">Ford</td>            <td class="filterable-cell">Escort</td>            <td class="filterable-cell">Blue</td>            <td class="filterable-cell">2000</td>        </tr>        <tr>            <td class="filterable-cell">Ford</td>            <td class="filterable-cell">Escort</td>            <td class="filterable-cell">Blue</td>            <td class="filterable-cell">2000</td>        </tr>    </tbody></table>

Fixed page header overlaps in-page anchors

I had the same problem.
I solved it by adding a class to the anchor element with the topbar height as the padding-top value.

<h1><a class="anchor" name="barlink">Bar</a></h1>

I used this CSS:

.anchor { padding-top: 90px; }

CSS-Only Scrollable Table with fixed headers

This answer will be used as a placeholder for the not fully supported position: sticky and will be updated over time. It is currently advised to not use the native implementation of this in a production environment.

See this for the current support: https://caniuse.com/#feat=css-sticky

Use of position: sticky

An alternative answer would be using position: sticky. As described by W3C:

A stickily positioned box is positioned similarly to a relatively positioned box, but the offset is computed with reference to the nearest ancestor with a scrolling box, or the viewport if no ancestor has a scrolling box.

This described exactly the behavior of a relative static header. It would be easy to assign this to the <thead> or the first <tr> HTML-tag, as this should be supported according to W3C. However, both Chrome, IE and Edge have problems assigning a sticky position property to these tags. There also seems to be no priority in solving this at the moment.

What does seem to work for a table element is assigning the sticky property to a table-cell. In this case the <th> cells.

Because a table is not a block-element that respects the static size you assign to it, it is best to use a wrapper element to define the scroll-overflow.

The code

div {  display: inline-block;  height: 150px;  overflow: auto}
table th {  position: -webkit-sticky;  position: sticky;  top: 0;}

/* == Just general styling, not relevant :) == */
table {  border-collapse: collapse;}
th {  background-color: #1976D2;  color: #fff;}
th,td {  padding: 1em .5em;}
table tr {  color: #212121;}
table tr:nth-child(odd) {  background-color: #BBDEFB;}

<div>  <table border="0">    <thead>      <tr>        <th>head1</th>        <th>head2</th>        <th>head3</th>        <th>head4</th>      </tr>    </thead>    <tr>      <td>row 1, cell 1</td>      <td>row 1, cell 2</td>      <td>row 1, cell 2</td>      <td>row 1, cell 2</td>    </tr>    <tr>      <td>row 2, cell 1</td>      <td>row 2, cell 2</td>      <td>row 1, cell 2</td>      <td>row 1, cell 2</td>    </tr>    <tr>      <td>row 2, cell 1</td>      <td>row 2, cell 2</td>      <td>row 1, cell 2</td>      <td>row 1, cell 2</td>    </tr>    <tr>      <td>row 2, cell 1</td>      <td>row 2, cell 2</td>      <td>row 1, cell 2</td>      <td>row 1, cell 2</td>    </tr>    <tr>      <td>row 2, cell 1</td>      <td>row 2, cell 2</td>      <td>row 1, cell 2</td>      <td>row 1, cell 2</td>    </tr>  </table></div>

var tableOffset = $("#table-1").offset().top;
var $header = $("#table-1 > thead").clone();
var $fixedHeader = $("#header-fixed").append($header);

$(window).bind("scroll", function() {
  var offset = $(this).scrollTop();

  if (offset >= tableOffset && $fixedHeader.is(":hidden")) {
    $fixedHeader.show();
  } else if (offset < tableOffset) {
    $fixedHeader.hide();
  }
});

#header-fixed {
  position: fixed;
  top: 0px;
  display: none;
  background-color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table-1">
  <thead>
    <tr>
      <th>Col1</th>
      <th>Col2</th>
      <th>Col3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>info</td>
      <td>info</td>
      <td>info</td>
    </tr>
    <tr>
      <td>info</td>
      <td>info</td>
      <td>info</td>
    </tr>
    <tr>
      <td>info</td>
      <td>info</td>
      <td>info</td>
    </tr>
  </tbody>
</table>
<table id="header-fixed"></table>