Fixed header fix

Fixed header fix

by Russ Blanc

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<header class="header">Fixed Header - 140PX</header>

<div id="pure">

<h1>Table Fixed Header</h1>

<h2>At Bottom of Fixed Header</h2>
        
        <h2>&darr; SCROLL &darr;</h2>
        
        

<div class="container">

<table class="blue">
  <thead>
    <tr>
      <th>Colonne 1</th>
      <th>Colonne 22</th>
      <th>Colonne 33</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
      
      <div class='tooltip2'> <!-- IMAGE -->
      <span class='up'>Img</span>
      <span class='tooltiptext2'>
        <img src='http://www.w3schools.com/howto/img_snow.jpg' class='cadre'>
      </span>
      </div>  <!-- IMAGE -->
      
        
      </td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo ! asdf asdf asdf asdf asdfsa df sadsad  sdsad fasdf sa fdf asdf asdf   asdf asdf asdf asdfasd asdf </td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
       <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
     ...

CSS

h1, h2 {
  text-align: center;
  text-transform: uppercase;
}

.container {
  width: 100%;
  margin: auto;
  overflow-x: auto; /* MUST KEEP */
}

table {
  border-collapse:collapse;
  
  /* width: 98%; */
  /* margin: 0 1%; */
  
  width: 660px;
  margin :0 auto;
  
}

.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;
  white-space: nowrap; /* MUST KEEP */
}

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

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

.fixed {
  top:0px;
  position:fixed;
  
  width: 660px;
  margin:0 auto;
  /* width:auto; */
  
  display:none;
  border-top:none;
  border-bottom:none;
}

.scrollMore {
  margin-top:10px;
}

.up {
  cursor:pointer;
}

.header {
    font: 13px Arial, Helvetica, sans-serif;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    height: 140px;
    border: 1px solid #000;
    }
    
 #pure {
   margin-top:200px;
 }
 
 /* IMAGE TOOLTIP */
    .up:hover {
        cursor:pointer;
    }

    .tooltip2 {
        position: relative;
        display: inline-block;
        border-bottom: 3px dotted black; /* If you want dots under the hoverable text */
        text-decoration: none; 
        color: #00F;
    }

    img.cadre {
	    border: 3px solid #D2D1D1; 
	    border-radius: 4px; 
	    width: 125px;
	    height: 125px;
    }

    /* Tooltip text */
    .tooltip2 .tooltiptext2 { 
        visibility: hidden;
        width: 130px;
        background-color: #fff;
        color: #fff;
        text-align: center;
        padding: 5px 5px;
        border-radius: 6px;
        margin-left: 7px;

 
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 0;
    }

    /* Show the tooltip text when you mouse over the tooltip container */
    .tooltip2:hover .tooltiptext2 {
 ...

JavaScript

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

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