How to make a sticky header with javascript

This snippet is used to make a sticky header within any block of content.

CSS


#stickyheader { width: inherit; height: 32px;}
#stickyalias { display: none;height: 32px;}

Javascript


$(function(){
        // Check the initial Poistion of the Sticky Header
        var stickyHeaderTop = $('#stickyheader').offset().top;
 
        $(window).scroll(function(){
                if( $(window).scrollTop() > stickyHeaderTop ) {
                        $('#stickyheader').css({position: 'fixed', top: '0px'});
                        $('#stickyalias').css('display', 'block');
                } else {
                        $('#stickyheader').css({position: 'static', top: '0px'});
                        $('#stickyalias').css('display', 'none');
                }
        });
});

HTML


<div id="stickyheader">

   <table width="100%">

     <tr>

      <td>Sticky Text 1</td>

      <td>Sticky Text 2</td>

      <td>Sticky Text 3</td>

      <td>Sticky Text 4</td>

      <td>Sticky Text 5</td>

     </tr>

   </table>

</div>

 

  <div id="stickyalias"></div>

I origanally found this here on Stackoverflow.