Table header to stay fixed at the top when user scrolls it out of view with jQuery

Question

I am trying to design an HTML table where the header will stay at the top of the page when AND ONLY when the user scrolls it out of view. For example, the table may be 500

Answer 1

This is by far the best solution I've found for having a fixed table header.

UPDATE 5/11: Fixed horizontal scrolling bug as pointed out by Kerry Johnson

Codepen: https://codepen.io/josephting/pen/demELL

;(function($) {
   $.fn.fixMe = function() {
      return this.each(function() {
         var $this = $(this),
            $t_fixed;
         function init() {
            $this.wrap('
');
            $t_fixed = $this.clone();
            $t_fixed.find("tbody").remove().end().addClass("fixed").insertBefore($this);
            resizeFixed();
         }
         function resizeFixed() {
           $t_fixed.width($this.outerWidth());
            $t_fixed.find("th").each(function(index) {
               $(this).css("width",$this.find("th").eq(index).outerWidth()+"px");
            });
         }
         function scrollFixed() {
            var offsetY = $(this).scrollTop(),
            offsetX = $(this).scrollLeft(),
            tableOffsetTop = $this.offset().top,
            tableOffsetBottom = tableOffsetTop + $this.height() - $this.find("thead").height(),
            tableOffsetLeft = $this.offset().left;
            if(offsetY < tableOffsetTop || offsetY > tableOffsetBottom)
               $t_fixed.hide();
            else if(offsetY >= tableOffsetTop && offsetY <= tableOffsetBottom && $t_fixed.is(":hidden"))
               $t_fixed.show();
            $t_fixed.css("left", tableOffsetLeft - offsetX + "px");
         }
         $(window).resize(resizeFixed);
         $(window).scroll(scrollFixed);
         init();
      });
   };
})(jQuery);

$(document).ready(function(){
   $("table").fixMe();
   $(".up").click(function() {
      $('html, body').animate({
      scrollTop: 0
   }, 2000);
 });
});

body{
  font:1.2em normal Arial,sans-serif;
  color:#34495E;
}

h1{
  text-align:center;
  text-transform:uppercase;
  letter-spacing:-2px;
  font-size:2.5em;
  margin:20px 0;
}

.container{
  width:90%;
  margin:auto;
}

table{
  border-collapse:collapse;
  width:100%;
}

.blue{
  border:2px solid #1ABC9C;
}

.blue thead{
  background:#1ABC9C;
}

.purple{
  border:2px solid #9B59B6;
}

.purple thead{
  background:#9B59B6;
}

thead{
  color:white;
}

th,td{
  text-align:center;
  padding:5px 0;
}

tbody tr:nth-child(even){
  background:#ECF0F1;
}

tbody tr:hover{
background:#BDC3C7;
  color:#FFFFFF;
}

.fixed{
  top:0;
  position:fixed;
  width:auto;
  display:none;
  border:none;
}

.scrollMore{
  margin-top:600px;
}

.up{
  cursor:pointer;
}

↓ SCROLL ↓

  

    

      
Colonne 1
      
Colonne 2
      
Colonne 3
    
  
  

    

      
Non
      
MaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMais
      
Allo !
    
    

      
Non
      
Mais
      
Allo !
    
    

      
Non
      
Mais
      
Allo !
    
    

      
Non
      
Mais
      
Allo !
    
    

      
Non
      
Mais
      
Allo !
    
    

      
Non
      
Mais
      
Allo !
    
    

      
Non
      
Mais
      
Allo !
    
    

      
Non
      
Mais
      
Allo !
    
    

      
Non
      
Mais
      
Allo !
    
    

      
Non
      
Mais
      
Allo !
    
       

      
Non
      
Mais
      
Allo !
    
    

      
Non
      
Mais
      
Allo !
    
    

      
Non
      
Mais
      
Allo !
    
    

      
Non
      
Mais
      
Allo !
    
    

      
Non
      
Mais
      
Allo !
    
    

      
Non
      
Mais
      
Allo !
    
    

      
Non
      
Mais
      
Allo !
    
    

      
Non
      
Mais
      
Allo !
    
    

      
Non
      
Mais
      
Allo !
    
    

      
Non
      
Mais
      
Allo !
    
  


↓ SCROLL MORE ↓

  

    

      
Colonne 1
      
Colonne 2
      
Colonne 3
    
  
  

    

      
Non
      
Mais
      
Allo !
    
    

      
Non
      
Mais
      
Allo !
    
    

      
Non
      
Mais
      
Allo !
    
    

      
Non
      
Mais
      
Allo !
    
    

      
Non
      
Mais
      
Allo !
    
    

      
Non
      
Mais
      
Allo !
    
    

      
Non
      
Mais
      
Allo !
    
    

      
Non
      
Mais
      
Allo !
    
    

      
Non
      
Mais
      
Allo !
    
    

      
Non
      
Mais
      
Allo !
    
    

      
Non
      
Mais
      
Allo !
    
    

      
Non
      
Mais
      
Allo !
    
    

      
Non
      
Mais
      
Allo !
    
    

      
Non
      
Mais
      
Allo !
    
    

      
Non
      
Mais
      
Allo !
    
    

      
Non
      
Mais
      
Allo !
    
    

      
Non
      
Mais
      
Allo !
    
    

      
Non
      
Mais
      
Allo !
    
    

      
Non
      
Mais
      
Allo !
    
       

      
Non
      
Mais
      
Allo !
    
    

      
Non
      
Mais
      
Allo !
    
    

      
Non
      
Mais
      
Allo !
    
    

      
Non
      
Mais
      
Allo !
    
    

      
Non
      
Mais
      
Allo !
    
    

      
Non
      
Mais
      
Allo !
    
    

      
Non
      
Mais
      
Allo !
    
    

      
Non
      
Mais
      
Allo !
    
    

      
Non
      
Mais
      
Allo !
    
    

      
Non
      
Mais
      
Allo !
    
    

      
Non
      
Mais
      
Allo !
    
    

      
Non
      
Mais
      
Allo !
    
    

      
Non
      
Mais
      
Allo !
    
    

      
Non
      
Mais
      
Allo !
    
    

      
Non
      
Mais
      
Allo !
    
    

      
Non
      
Mais
      
Allo !
    
    

      
Non
      
Mais
      
Allo !
    
    

      
Non
      
Mais
      
Allo !
    
    

      
Non
      
Mais
      
Allo !
    
       

      
Non
      
Mais
      
Allo !
    
  

↑ UP ↑