jquery - Javascript : Fix Table Header when on top of page -

everyone. so, have table in project , want when reaches top of table, gets fixed. don't want use jquery.

here table in template.

<table class="av-enrollment-table-header" id="av-enrollment-table-header">     <thead>       <tr>         <th>first name</th>         <th>last name</th>         <th>mobile number</th>         <th>email</th>         <th>amount paid</th>         <th>amount sold on</th>         <th style="width: 13px; font-size: 15px"><i class="fa fa-trash" ng-click="deletestudent()(index, students)"></i></th>       </tr>     </thead>   </table> 

here id , class used

  #av-enrollment-table-header {   width: 100%;   border: 1px solid black;   margin-bottom: -1px;   #header-fixed {   position: fixed;   top: 0px; display:none;   background-color:white; } 

here javascript code

window.addeventlistener("scroll", function() {     var tableoffset = null;     var header = document.getelementbyid("#av-enrollment-table- header");     var fixedheader = document.getelementbyid("#header-fixed");     var horizontalscroll = header.scrolltop;      if (horizontalscroll >= tableoffset) {         header.classlist.add(fixedheader);     }     else if (offset < tableoffset) {         header.classlist.remove(fixedheader);     } }); 

i don't want function. want triggered when header reaches top of screen.

please help.