From ff1722f9961fa349fa9412fb5db599bae1136918 Mon Sep 17 00:00:00 2001
From: Amadeusz Iwanowski <amadeusz.iwanowski@syncron.com>
Date: Thu, 14 Jun 2018 12:18:40 +0200
Subject: [PATCH 1/6] Made clonedHeader's ids unique

Cloning the header can result in generating tags with duplicate ids.
This change adds suffixes to all ids in tags within the $clonedHeader.
---
 demo/bootstrap.html             | 4 ++--
 js/jquery.stickytableheaders.js | 8 ++++++++
 2 files changed, 10 insertions(+), 2 deletions(-)
diff --git a/demo/bootstrap.html b/demo/bootstrap.html
index d190b99..c0d04ff 100644
--- a/demo/bootstrap.html
+++ b/demo/bootstrap.html
@@ -38,9 +38,9 @@ <h1>Twitter Bootstrap Demo</h1>
       <p>There is also a bug in IE7 that causes the leftmost column to resize when scrolling. Consider using conditional comments (see source) to make sure the plugin is not loaded in this browser.
       </p>
       <table class="table table-bordered table-striped">
-        <thead>
+        <thead id="my-header">
           <tr>
-            <th>Label</th>
+            <th id="my-header-label">Label</th>
             <th>Layout width</th>
             <th>Column width</th>
             <th>Gutter width</th>
diff --git a/js/jquery.stickytableheaders.js b/js/jquery.stickytableheaders.js
index 4d742f1..f84564a 100644
--- a/js/jquery.stickytableheaders.js
+++ b/js/jquery.stickytableheaders.js
@@ -63,6 +63,7 @@
 
 				base.$originalHeader.addClass('tableFloatingHeaderOriginal');
 
+				base.changeClonedHeaderIds(base.$clonedHeader);
 				base.$originalHeader.after(base.$clonedHeader);
 
 				base.$printStyle = $('<style type="text/css" media="print">' +
@@ -79,6 +80,13 @@
 			base.bind();
 		};
 
+		base.changeClonedHeaderIds = function($clonedHeader) {
+			$clonedHeader.find('*').addBack().filter('[id]').each(function() {
+				var $component = $(this);
+				$component.attr('id', $component.attr('id') + '-' + name + '-cloned');
+			});
+		};
+
 		base.destroy = function (){
 			base.$el.unbind('destroyed', base.teardown);
 			base.teardown();

From c3449a65e196006aacedcfd03c7fb68d7eb14d26 Mon Sep 17 00:00:00 2001
From: Amadeusz Iwanowski <amadeusz.iwanowski@syncron.com>
Date: Thu, 14 Jun 2018 16:34:45 +0200
Subject: [PATCH 2/6] Make header clipped to container bounds

When we set "position: fixed" on header, it is shown before other DOM elements.
This behaviour is causes problems because, for instance, header is shown
outside of its container. I prepared interactive
demo in demo/scrollable-div-with-clipping-container.html
---
 ...crollable-div-with-clipping-container.html | 1224 +++++++++++++++++
 js/jquery.stickytableheaders.js               |   52 +-
 2 files changed, 1271 insertions(+), 5 deletions(-)
 create mode 100644 demo/scrollable-div-with-clipping-container.html

diff --git a/demo/scrollable-div-with-clipping-container.html b/demo/scrollable-div-with-clipping-container.html
new file mode 100644
index 0000000..ae1497a
--- /dev/null
+++ b/demo/scrollable-div-with-clipping-container.html
@@ -0,0 +1,1224 @@
+﻿<!DOCTYPE HTML>
+<html>
+<head>
+	<title>Demo: Using StickyTableHeaders within a scrollable block</title>
+	<link rel="stylesheet" media="all" href="css/oocss.css" type="text/css">
+	<link rel="stylesheet" media="all" href="css/custom.css" type="text/css">
+</head>
+<body class="scrollable-block">
+	<div class="header">
+		<h1>
+			Demo: Using StickyTableHeaders within a scrollable block with Clipping container
+			<br/>
+			<button type="button" class="destroy">Remove clipping container</button>
+			<button type="button" class="apply">Apply clipping container</button>
+		</h1>
+	</div>
+	<div id="clippingContainer" class="scrollable-area">
+		<h2>
+			Results - Cycling - Road 2011
+		</h2>
+		<h3>
+			Women Elite Championnats du Monde UCI (DEN/CM)
+		</h3>
+		<table class="uci">
+			<thead>
+				<tr>
+					<th>
+						Rank
+					</th>
+					<th>
+						Name
+					</th>
+					<th>
+						Nat.
+					</th>
+					<th>
+						Team
+					</th>
+					<th class="age">
+						Age
+					</th>
+					<th class="result">
+						Result
+					</th>
+					<th class="result">
+						Result
+					</th>
+					<th class="result">
+						Result
+					</th>
+					<th class="result">
+						Result
+					</th>
+					<th class="result">
+						Result
+					</th>
+					<th class="result">
+						Result
+					</th>
+					<th class="result">
+						Result
+					</th>
+					<th class="result">
+						Result
+					</th>
+					<th class="result">
+						Result
+					</th>
+					<th class="result">
+						Result
+					</th>
+					<th class="result">
+						Result
+					</th>
+					<th class="result">
+						Result
+					</th>
+					<th class="result">
+						Result
+					</th>
+					<th class="result">
+						Result
+					</th>
+					<th class="result">
+						Result
+					</th>
+					<th class="result">
+						Result
+					</th>
+					<th class="result">
+						Result
+					</th>
+					<th class="result">
+						Result
+					</th>
+					<th class="result">
+						Result
+					</th>
+					<th class="result">
+						Result
+					</th>
+					<th class="result">
+						Result
+					</th>
+					<th class="result">
+						Result
+					</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr valign="top">
+					<td>
+						1
+					</td>
+					<td>
+						Judith ARNDT
+					</td>
+					<td>
+						GER
+					</td>
+					<td>
+						<!--GER-->
+						<span title="GERMANY">GER</span>
+					</td>
+					<td class="age">
+						35
+					</td>
+					<td class="result">
+						37:07.38
+					</td>
+				</tr>
+				<tr valign="top">
+					<td>
+						2
+					</td>
+					<td>
+						Linda Melanie VILLUMSEN
+					</td>
+					<td>
+						NZL
+					</td>
+					<td>
+						<!--NZL-->
+						<span title="NEW ZEALAND">NZL</span>
+					</td>
+					<td class="age">
+						26
+					</td>
+					<td class="result">
+						+21.73
+					</td>
+				</tr>
+				<tr valign="top">
+					<td>
+						3
+					</td>
+					<td>
+						Emma POOLEY
+					</td>
+					<td>
+						GBR
+					</td>
+					<td>
+						<!--GBR-->
+						<span title="GREAT BRITAIN">GBR</span>
+					</td>
+					<td class="age">
+						29
+					</td>
+					<td class="result">
+						+24.13
+					</td>
+				</tr>
+				<tr valign="top">
+					<td>
+						4
+					</td>
+					<td>
+						Tara WHITTEN
+					</td>
+					<td>
+						CAN
+					</td>
+					<td>
+						<!--CAN-->
+						<span title="CANADA">CAN</span>
+					</td>
+					<td class="age">
+						31
+					</td>
+					<td class="result">
+						+26.16
+					</td>
+				</tr>
+				<tr valign="top">
+					<td>
+						5
+					</td>
+					<td>
+						Clara HUGHES
+					</td>
+					<td>
+						CAN
+					</td>
+					<td>
+						<!--CAN-->
+						<span title="CANADA">CAN</span>
+					</td>
+					<td class="age">
+						39
+					</td>
+					<td class="result">
+						+36.79
+					</td>
+				</tr>
+				<tr valign="top">
+					<td>
+						6
+					</td>
+					<td>
+						Eleonora VAN DIJK
+					</td>
+					<td>
+						NED
+					</td>
+					<td>
+						<!--NED-->
+						<span title="NETHERLANDS">NED</span>
+					</td>
+					<td class="age">
+						24
+					</td>
+					<td class="result">
+						+38.88
+					</td>
+				</tr>
+				<tr valign="top">
+					<td>
+						7
+					</td>
+					<td>
+						Rhae-Christie SHAW
+					</td>
+					<td>
+						CAN
+					</td>
+					<td>
+						<!--CAN-->
+						<span title="CANADA">CAN</span>
+					</td>
+					<td class="age">
+						36
+					</td>
+					<td class="result">
+						+39.23
+					</td>
+				</tr>
+				<tr valign="top">
+					<td>
+						8
+					</td>
+					<td>
+						Amber NEBEN
+					</td>
+					<td>
+						USA
+					</td>
+					<td>
+						<!--USA-->
+						<span title="UNITED STATES">USA</span>
+					</td>
+					<td class="age">
+						36
+					</td>
+					<td class="result">
+						+41.09
+					</td>
+				</tr>
+				<tr valign="top">
+					<td>
+						9
+					</td>
+					<td>
+						Emilia FAHLIN
+					</td>
+					<td>
+						SWE
+					</td>
+					<td>
+						<!--SWE-->
+						<span title="SWEDEN">SWE</span>
+					</td>
+					<td class="age">
+						23
+					</td>
+					<td class="result">
+						+55.06
+					</td>
+				</tr>
+				<tr valign="top">
+					<td>
+						10
+					</td>
+					<td>
+						Marianne VOS
+					</td>
+					<td>
+						NED
+					</td>
+					<td>
+						<!--NED-->
+						<span title="NETHERLANDS">NED</span>
+					</td>
+					<td class="age">
+						24
+					</td>
+					<td class="result">
+						+55.77
+					</td>
+				</tr>
+				<tr valign="top">
+					<td>
+						11
+					</td>
+					<td>
+						Ina TEUTENBERG
+					</td>
+					<td>
+						GER
+					</td>
+					<td>
+						<!--GER-->
+						<span title="GERMANY">GER</span>
+					</td>
+					<td class="age">
+						37
+					</td>
+					<td class="result">
+						+56.14
+					</td>
+				</tr>
+				<tr valign="top">
+					<td>
+						12
+					</td>
+					<td>
+						Shara GILLOW
+					</td>
+					<td>
+						AUS
+					</td>
+					<td>
+						<!--AUS-->
+						<span title="AUSTRALIA">AUS</span>
+					</td>
+					<td class="age">
+						24
+					</td>
+					<td class="result">
+						+1:00.55
+					</td>
+				</tr>
+				<tr valign="top">
+					<td>
+						13
+					</td>
+					<td>
+						Elena TCHALYKH
+					</td>
+					<td>
+						AZE
+					</td>
+					<td>
+						<!--AZE-->
+						<span title="AZERBAIJAN">AZE</span>
+					</td>
+					<td class="age">
+						37
+					</td>
+					<td class="result">
+						+1:00.84
+					</td>
+				</tr>
+				<tr valign="top">
+					<td>
+						14
+					</td>
+					<td>
+						Emma JOHANSSON
+					</td>
+					<td>
+						SWE
+					</td>
+					<td>
+						<!--SWE-->
+						<span title="SWEDEN">SWE</span>
+					</td>
+					<td class="age">
+						28
+					</td>
+					<td class="result">
+						+1:01.13
+					</td>
+				</tr>
+				<tr valign="top">
+					<td>
+						15
+					</td>
+					<td>
+						Evelyn STEVENS
+					</td>
+					<td>
+						USA
+					</td>
+					<td>
+						<!--USA-->
+						<span title="UNITED STATES">USA</span>
+					</td>
+					<td class="age">
+						28
+					</td>
+					<td class="result">
+						+1:21.73
+					</td>
+				</tr>
+				<tr valign="top">
+					<td>
+						16
+					</td>
+					<td>
+						Olga ZABELINSKAYA
+					</td>
+					<td>
+						RUS
+					</td>
+					<td>
+						<!--RUS-->
+						<span title="RUSSIA">RUS</span>
+					</td>
+					<td class="age">
+						31
+					</td>
+					<td class="result">
+						+1:25.20
+					</td>
+				</tr>
+				<tr valign="top">
+					<td>
+						17
+					</td>
+					<td>
+						Julia SHAW
+					</td>
+					<td>
+						GBR
+					</td>
+					<td>
+						<!--GBR-->
+						<span title="GREAT BRITAIN">GBR</span>
+					</td>
+					<td class="age">
+						46
+					</td>
+					<td class="result">
+						+1:49.88
+					</td>
+				</tr>
+				<tr valign="top">
+					<td>
+						18
+					</td>
+					<td>
+						Noemi CANTELE
+					</td>
+					<td>
+						ITA
+					</td>
+					<td>
+						<!--ITA-->
+						<span title="ITALY">ITA</span>
+					</td>
+					<td class="age">
+						30
+					</td>
+					<td class="result">
+						+1:58.26
+					</td>
+				</tr>
+				<tr valign="top">
+					<td>
+						19
+					</td>
+					<td>
+						Pascale SCHNIDER
+					</td>
+					<td>
+						SUI
+					</td>
+					<td>
+						<!--SUI-->
+						<span title="SWITZERLAND">SUI</span>
+					</td>
+					<td class="age">
+						27
+					</td>
+					<td class="result">
+						+1:58.84
+					</td>
+				</tr>
+				<tr valign="top">
+					<td>
+						20
+					</td>
+					<td>
+						Pia SUNDSTEDT
+					</td>
+					<td>
+						FIN
+					</td>
+					<td>
+						<!--FIN-->
+						<span title="FINLAND">FIN</span>
+					</td>
+					<td class="age">
+						36
+					</td>
+					<td class="result">
+						+2:01.33
+					</td>
+				</tr>
+				<tr valign="top">
+					<td>
+						21
+					</td>
+					<td>
+						Mélodie LESUEUR
+					</td>
+					<td>
+						FRA
+					</td>
+					<td>
+						<!--FRA-->
+						<span title="FRANCE">FRA</span>
+					</td>
+					<td class="age">
+						21
+					</td>
+					<td class="result">
+						+2:04.91
+					</td>
+				</tr>
+				<tr valign="top">
+					<td>
+						22
+					</td>
+					<td>
+						Aleksandra SOSENKO
+					</td>
+					<td>
+						LTU
+					</td>
+					<td>
+						<!--LTU-->
+						<span title="LITHUANIA">LTU</span>
+					</td>
+					<td class="age">
+						20
+					</td>
+					<td class="result">
+						+2:08.82
+					</td>
+				</tr>
+				<tr valign="top">
+					<td>
+						23
+					</td>
+					<td>
+						Olena PAVLUKHINA
+					</td>
+					<td>
+						UKR
+					</td>
+					<td>
+						<!--UKR-->
+						<span title="UKRAINE">UKR</span>
+					</td>
+					<td class="age">
+						22
+					</td>
+					<td class="result">
+						+2:19.05
+					</td>
+				</tr>
+				<tr valign="top">
+					<td>
+						24
+					</td>
+					<td>
+						Latoya BRULEE
+					</td>
+					<td>
+						BEL
+					</td>
+					<td>
+						<!--BEL-->
+						<span title="BELGIUM">BEL</span>
+					</td>
+					<td class="age">
+						23
+					</td>
+					<td class="result">
+						+2:29.12
+					</td>
+				</tr>
+				<tr valign="top">
+					<td>
+						25
+					</td>
+					<td>
+						Grete TREIER
+					</td>
+					<td>
+						EST
+					</td>
+					<td>
+						<!--EST-->
+						<span title="ESTONIA">EST</span>
+					</td>
+					<td class="age">
+						34
+					</td>
+					<td class="result">
+						+2:33.78
+					</td>
+				</tr>
+				<tr valign="top">
+					<td>
+						26
+					</td>
+					<td>
+						Leire OLABERRIA DORRONSORO
+					</td>
+					<td>
+						ESP
+					</td>
+					<td>
+						<!--ESP-->
+						<span title="SPAIN">ESP</span>
+					</td>
+					<td class="age">
+						34
+					</td>
+					<td class="result">
+						+2:42.41
+					</td>
+				</tr>
+				<tr valign="top">
+					<td>
+						27
+					</td>
+					<td>
+						Christel FERRIER-BRUNEAU
+					</td>
+					<td>
+						FRA
+					</td>
+					<td>
+						<!--FRA-->
+						<span title="FRANCE">FRA</span>
+					</td>
+					<td class="age">
+						32
+					</td>
+					<td class="result">
+						+2:45.56
+					</td>
+				</tr>
+				<tr valign="top">
+					<td>
+						28
+					</td>
+					<td>
+						Martina SABLIKOVA
+					</td>
+					<td>
+						CZE
+					</td>
+					<td>
+						<!--CZE-->
+						<span title="CZECH REPUBLIC">CZE</span>
+					</td>
+					<td class="age">
+						24
+					</td>
+					<td class="result">
+						+2:57.43
+					</td>
+				</tr>
+				<tr valign="top">
+					<td>
+						29
+					</td>
+					<td>
+						Alexandra BURCHENKOVA
+					</td>
+					<td>
+						RUS
+					</td>
+					<td>
+						<!--RUS-->
+						<span title="RUSSIA">RUS</span>
+					</td>
+					<td class="age">
+						23
+					</td>
+					<td class="result">
+						+3:01.22
+					</td>
+				</tr>
+				<tr valign="top">
+					<td>
+						30
+					</td>
+					<td>
+						Ashleigh MOOLMAN
+					</td>
+					<td>
+						RSA
+					</td>
+					<td>
+						<!--RSA-->
+						<span title="SOUTH AFRICA">RSA</span>
+					</td>
+					<td class="age">
+						26
+					</td>
+					<td class="result">
+						+3:07.52
+					</td>
+				</tr>
+				<tr valign="top">
+					<td>
+						31
+					</td>
+					<td>
+						Taryn HEATHER
+					</td>
+					<td>
+						AUS
+					</td>
+					<td>
+						<!--AUS-->
+						<span title="AUSTRALIA">AUS</span>
+					</td>
+					<td class="age">
+						29
+					</td>
+					<td class="result">
+						+3:08.71
+					</td>
+				</tr>
+				<tr valign="top">
+					<td>
+						32
+					</td>
+					<td>
+						Elisa LONGO BORGHINI
+					</td>
+					<td>
+						ITA
+					</td>
+					<td>
+						<!--ITA-->
+						<span title="ITALY">ITA</span>
+					</td>
+					<td class="age">
+						20
+					</td>
+					<td class="result">
+						+3:13.09
+					</td>
+				</tr>
+				<tr valign="top">
+					<td>
+						33
+					</td>
+					<td>
+						Michelle LAUGE JENSEN
+					</td>
+					<td>
+						DEN
+					</td>
+					<td>
+						<!--DEN-->
+						<span title="DENMARK">DEN</span>
+					</td>
+					<td class="age">
+						20
+					</td>
+					<td class="result">
+						+3:19.29
+					</td>
+				</tr>
+				<tr valign="top">
+					<td>
+						34
+					</td>
+					<td>
+						Tjaša RUTAR
+					</td>
+					<td>
+						SLO
+					</td>
+					<td>
+						<!--SLO-->
+						<span title="SLOVENIA">SLO</span>
+					</td>
+					<td class="age">
+						27
+					</td>
+					<td class="result">
+						+3:20.45
+					</td>
+				</tr>
+				<tr valign="top">
+					<td>
+						35
+					</td>
+					<td>
+						Eneritz ITURRIAGAECHEVARRIA MAZAGA
+					</td>
+					<td>
+						ESP
+					</td>
+					<td>
+						<!--ESP-->
+						<span title="SPAIN">ESP</span>
+					</td>
+					<td class="age">
+						31
+					</td>
+					<td class="result">
+						+3:28.91
+					</td>
+				</tr>
+				<tr valign="top">
+					<td>
+						36
+					</td>
+					<td>
+						Alena AMIALIUSIK
+					</td>
+					<td>
+						BLR
+					</td>
+					<td>
+						<!--BLR-->
+						<span title="BELARUS">BLR</span>
+					</td>
+					<td class="age">
+						22
+					</td>
+					<td class="result">
+						+3:29.20
+					</td>
+				</tr>
+				<tr valign="top">
+					<td>
+						37
+					</td>
+					<td>
+						Katarzyna SOSNA
+					</td>
+					<td>
+						LTU
+					</td>
+					<td>
+						<!--LTU-->
+						<span title="LITHUANIA">LTU</span>
+					</td>
+					<td class="age">
+						21
+					</td>
+					<td class="result">
+						+3:33.05
+					</td>
+				</tr>
+				<tr valign="top">
+					<td>
+						38
+					</td>
+					<td>
+						Liesbet DE VOCHT
+					</td>
+					<td>
+						BEL
+					</td>
+					<td>
+						<!--BEL-->
+						<span title="BELGIUM">BEL</span>
+					</td>
+					<td class="age">
+						32
+					</td>
+					<td class="result">
+						+3:44.95
+					</td>
+				</tr>
+				<tr valign="top">
+					<td>
+						39
+					</td>
+					<td>
+						Valeria MULLER
+					</td>
+					<td>
+						ARG
+					</td>
+					<td>
+						<!--ARG-->
+						<span title="ARGENTINA">ARG</span>
+					</td>
+					<td class="age">
+						37
+					</td>
+					<td class="result">
+						+3:52.77
+					</td>
+				</tr>
+				<tr valign="top">
+					<td>
+						40
+					</td>
+					<td>
+						Nontasin CHANPENG
+					</td>
+					<td>
+						THA
+					</td>
+					<td>
+						<!--THA-->
+						<span title="THAILAND">THA</span>
+					</td>
+					<td class="age">
+						27
+					</td>
+					<td class="result">
+						+3:59.35
+					</td>
+				</tr>
+				<tr valign="top">
+					<td>
+						41
+					</td>
+					<td>
+						Tetyana RIABCHENKO
+					</td>
+					<td>
+						UKR
+					</td>
+					<td>
+						<!--UKR-->
+						<span title="UKRAINE">UKR</span>
+					</td>
+					<td class="age">
+						22
+					</td>
+					<td class="result">
+						+4:00.58
+					</td>
+				</tr>
+				<tr valign="top">
+					<td>
+						42
+					</td>
+					<td>
+						Verónica LEAL BALDERAS
+					</td>
+					<td>
+						MEX
+					</td>
+					<td>
+						<!--MEX-->
+						<span title="MEXICO">MEX</span>
+					</td>
+					<td class="age">
+						34
+					</td>
+					<td class="result">
+						+4:07.34
+					</td>
+				</tr>
+				<tr valign="top">
+					<td>
+						43
+					</td>
+					<td>
+						Alenka NOVAK
+					</td>
+					<td>
+						SLO
+					</td>
+					<td>
+						<!--SLO-->
+						<span title="SLOVENIA">SLO</span>
+					</td>
+					<td class="age">
+						34
+					</td>
+					<td class="result">
+						+4:12.46
+					</td>
+				</tr>
+				<tr valign="top">
+					<td>
+						44
+					</td>
+					<td>
+						Kathryn BERTINE
+					</td>
+					<td>
+						SKN
+					</td>
+					<td>
+						<!--SKN-->
+						<span title="ST. KITTS &amp; NEVIS">SKN</span>
+					</td>
+					<td class="age">
+						36
+					</td>
+					<td class="result">
+						+4:17.64
+					</td>
+				</tr>
+				<tr valign="top">
+					<td>
+						45
+					</td>
+					<td>
+						Monrudee CHAPOOKHAM
+					</td>
+					<td>
+						THA
+					</td>
+					<td>
+						<!--THA-->
+						<span title="THAILAND">THA</span>
+					</td>
+					<td class="age">
+						29
+					</td>
+					<td class="result">
+						+4:21.88
+					</td>
+				</tr>
+				<tr valign="top">
+					<td>
+						46
+					</td>
+					<td>
+						Jacqueline HAHN
+					</td>
+					<td>
+						AUT
+					</td>
+					<td>
+						<!--AUT-->
+						<span title="AUSTRIA">AUT</span>
+					</td>
+					<td class="age">
+						20
+					</td>
+					<td class="result">
+						+4:48.44
+					</td>
+				</tr>
+				<tr valign="top">
+					<td>
+						47
+					</td>
+					<td>
+						Dinah CHAN
+					</td>
+					<td>
+						SIN
+					</td>
+					<td>
+						<!--SIN-->
+						<span title="SINGAPORE">SIN</span>
+					</td>
+					<td class="age">
+						25
+					</td>
+					<td class="result">
+						+4:56.11
+					</td>
+				</tr>
+				<tr valign="top">
+					<td>
+						48
+					</td>
+					<td>
+						Yelena ANTONOVA
+					</td>
+					<td>
+						KAZ
+					</td>
+					<td>
+						<!--KAZ-->
+						<span title="KAZAKHSTAN">KAZ</span>
+					</td>
+					<td class="age">
+						40
+					</td>
+					<td class="result">
+						+5:21.82
+					</td>
+				</tr>
+				<tr valign="top">
+					<td>
+						49
+					</td>
+					<td>
+						Martina RUZICKOVA
+					</td>
+					<td>
+						CZE
+					</td>
+					<td>
+						<!--CZE-->
+						<span title="CZECH REPUBLIC">CZE</span>
+					</td>
+					<td class="age">
+						31
+					</td>
+					<td class="result">
+						+5:46.28
+					</td>
+				</tr>
+				<tr valign="top">
+					<td>
+						50
+					</td>
+					<td>
+						Seba ALRAAI
+					</td>
+					<td>
+						SYR
+					</td>
+					<td>
+						<!--SYR-->
+						<span title="SYRIA">SYR</span>
+					</td>
+					<td class="age">
+						29
+					</td>
+					<td class="result">
+						+9:40.76
+					</td>
+				</tr>
+				<tr valign="top">
+					<td>
+						51
+					</td>
+					<td>
+						Claire FRASER
+					</td>
+					<td>
+						GUY
+					</td>
+					<td>
+						<!--GUY-->
+						<span title="GUYANA">GUY</span>
+					</td>
+					<td class="age">
+						33
+					</td>
+					<td class="result">
+						+9:45.43
+					</td>
+				</tr>
+			</tbody>
+		</table>
+		<div style="height: 4000px">
+			lots of content down here...
+		</div>
+	</div><!-- .scrollable-area -->
+	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+	<script src="../js/jquery.stickytableheaders.js"></script>
+	<script>
+
+		$(document).ready(function () {
+			// passing a fixedOffset param will cause the table header to stick to the bottom of this element
+			$("table")
+				.stickyTableHeaders({
+					scrollableArea: $(".scrollable-area")[0],
+					fixedOffset: 2,
+					clippingContainerId: "clippingContainer"
+				});
+
+			$('.destroy').on('click', function(e){
+				$('table').stickyTableHeaders('destroy');
+				$('thead').css('clip', '');
+				$('table')
+					.stickyTableHeaders({
+						scrollableArea: $(".scrollable-area")[0],
+						fixedOffset: 2
+					});
+			});
+
+			$('.apply').on('click', function(e){
+				$('table').stickyTableHeaders('destroy');
+				$('table')
+					.stickyTableHeaders({
+						scrollableArea: $(".scrollable-area")[0],
+						fixedOffset: 2,
+						clippingContainerId: "clippingContainer"
+					});
+			});
+		});
+
+	</script>
+</body>
+</html>
diff --git a/js/jquery.stickytableheaders.js b/js/jquery.stickytableheaders.js
index f84564a..592a05c 100644
--- a/js/jquery.stickytableheaders.js
+++ b/js/jquery.stickytableheaders.js
@@ -15,7 +15,10 @@
 			objWindow: window,
 			scrollableArea: window,
 			cacheHeaderHeight: false,
-			zIndex: 3
+			cacheHeaderWidth: false,
+			cacheClippingContainerWidth: true,
+			zIndex: 3,
+			clippingContainerId: null
 		};
 
 	function Plugin (el, options) {
@@ -36,8 +39,10 @@
 		base.$clonedHeader = null;
 		base.$originalHeader = null;
 
-		// Cache header height for performance reasons
+		// Cache header height, width and clippingContainer width for performance reasons
 		base.cachedHeaderHeight = null;
+		base.cachedHeaderWidth = null;
+		base.cachedClippingContainerWidth = null;
 
 		// Keep track of state
 		base.isSticky = false;
@@ -77,6 +82,7 @@
 
 			base.updateWidth();
 			base.toggleHeaders();
+			base.updateHeaderCssPropertyClip();
 			base.bind();
 		};
 
@@ -164,7 +170,7 @@
 						notScrolledPastBottom;
 
 					if (scrolledPastTop) {
-						headerHeight = base.options.cacheHeaderHeight ? base.cachedHeaderHeight : base.$clonedHeader.height();
+						headerHeight = base.getHeaderHeight();
 						notScrolledPastBottom = (base.isWindowScrolling ? scrollTop : 0) <
 							(offset.top + $this.height() - headerHeight - (base.isWindowScrolling ? 0 : newTopOffset));
 					}
@@ -174,7 +180,7 @@
 						base.$originalHeader.css({
 							'position': 'fixed',
 							'margin-top': base.options.marginTop,
-                                                        'top': 0,
+														'top': 0,
 							'left': newLeft,
 							'z-index': base.options.zIndex
 						});
@@ -188,6 +194,7 @@
 							$this.trigger('enabledStickiness.' + name);
 						}
 						base.setPositionValues();
+						base.updateHeaderCssPropertyClip();
 					} else if (base.isSticky) {
 						base.$originalHeader.css('position', 'static');
 						base.$clonedHeader.css('display', 'none');
@@ -230,12 +237,38 @@
 			// Copy row width from whole table
 			base.$originalHeader.css('width', base.$clonedHeader.width());
 
-			// If we're caching the height, we need to update the cached value when the width changes
+			// If we're caching the height or width, we need to update the cached values when the width or height changes.
 			if (base.options.cacheHeaderHeight) {
 				base.cachedHeaderHeight = base.$clonedHeader.height();
 			}
+			if (base.options.cacheHeaderWidth) {
+				base.cachedHeaderWidth = base.$clonedHeader.width();
+			}
 		}, 0);
 
+		base.updateHeaderCssPropertyClip = function() {
+			if (base.$clippingContainer.length === 0) {
+				return;
+			}
+			var container = base.$clippingContainer,
+				containerOffset = container.offset(),
+				headerOffset = base.$originalHeader.offset(),
+				fromHeaderToContainer = containerOffset.left - headerOffset.left,
+				left = Math.max(0, fromHeaderToContainer),
+				right = Math.max(0, Math.min(base.getHeaderWidth(), fromHeaderToContainer + base.clippingContainerWidth())),
+				top = 0,
+				bottom = base.getHeaderHeight();
+			var clipString = 'rect(' + top + 'px,' + right + 'px,' + bottom + 'px,' + left + 'px)';
+			base.$originalHeader.css('clip', clipString);
+		};
+
+		base.clippingContainerWidth = function() {
+			if (!base.cachedClippingContainerWidth || !base.options.cacheClippingContainerWidth) {
+				base.cachedClippingContainerWidth = base.$clippingContainer.width();
+			}
+			return base.cachedClippingContainerWidth;
+		}
+
 		base.getWidth = function ($clonedHeaders) {
 			var widths = [];
 			$clonedHeaders.each(function (index) {
@@ -291,6 +324,14 @@
 			});
 		};
 
+		base.getHeaderHeight = function() {
+			 return base.options.cacheHeaderHeight ? base.cachedHeaderHeight : base.$clonedHeader.height();
+		}
+
+		base.getHeaderWidth = function() {
+			return base.options.cacheHeaderWidth ? base.cachedHeaderWidth : base.$clonedHeader.width();
+		}
+
 		base.setOptions = function (options) {
 			base.options = $.extend({}, defaults, options);
 			base.$window = $(base.options.objWindow);
@@ -298,6 +339,7 @@
 			base.$document = $(base.options.objDocument);
 			base.$scrollableArea = $(base.options.scrollableArea);
 			base.isWindowScrolling = base.$scrollableArea[0] === base.$window[0];
+			base.$clippingContainer = $('#' + base.options.clippingContainerId);
 		};
 
 		base.updateOptions = function (options) {

From 2cc423a69c0ee05be1166f88a819da3ba70e6681 Mon Sep 17 00:00:00 2001
From: Amadeusz Iwanowski <amadeusz.iwanowski@syncron.com>
Date: Thu, 14 Jun 2018 17:18:54 +0200
Subject: [PATCH 3/6] Fix position computation on scrollableArea horizontal
 scroll

Before this change there was an issue with horizontal scroll in scrollableArea.
You can observe it by scrolling horizontally
div in demo/scrollable-div-with-clipping-container.html
---
 js/jquery.stickytableheaders.js | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/js/jquery.stickytableheaders.js b/js/jquery.stickytableheaders.js
index 592a05c..a8333a7 100644
--- a/js/jquery.stickytableheaders.js
+++ b/js/jquery.stickytableheaders.js
@@ -118,6 +118,7 @@
 			base.$scrollableArea.on('scroll.' + name, base.toggleHeaders);
 			if (!base.isWindowScrolling) {
 				base.$window.on('scroll.' + name + base.id, base.setPositionValues);
+				base.$window.on('scroll.' + name + base.id, base.toggleHeaders);
 				base.$window.on('resize.' + name + base.id, base.toggleHeaders);
 			}
 			base.$scrollableArea.on('resize.' + name, base.toggleHeaders);
@@ -150,7 +151,6 @@
 			if (base.$el) {
 				base.$el.each(function () {
 					var $this = $(this),
-						newLeft,
 						newTopOffset = base.isWindowScrolling ? (
 									isNaN(base.options.fixedOffset) ?
 									base.options.fixedOffset.outerHeight() :
@@ -160,7 +160,7 @@
 						offset = $this.offset(),
 
 						scrollTop = base.$scrollableArea.scrollTop() + newTopOffset,
-						scrollLeft = base.$scrollableArea.scrollLeft(),
+						scrollLeft = base.$window.scrollLeft(),
 
 						headerHeight,
 
@@ -176,15 +176,14 @@
 					}
 
 					if (scrolledPastTop && notScrolledPastBottom) {
-						newLeft = offset.left - scrollLeft + base.options.leftOffset;
+						base.leftOffset = offset.left - scrollLeft + base.options.leftOffset;
 						base.$originalHeader.css({
 							'position': 'fixed',
 							'margin-top': base.options.marginTop,
 														'top': 0,
-							'left': newLeft,
+							'left': base.leftOffset,
 							'z-index': base.options.zIndex
 						});
-						base.leftOffset = newLeft;
 						base.topOffset = newTopOffset;
 						base.$clonedHeader.css('display', '');
 						if (!base.isSticky) {
@@ -216,7 +215,7 @@
 			}
 			base.$originalHeader.css({
 				'top': base.topOffset - (base.isWindowScrolling ? 0 : winScrollTop),
-				'left': base.leftOffset - (base.isWindowScrolling ? 0 : winScrollLeft)
+				'left': base.leftOffset
 			});
 		}, 0);
 

From 84fbaa22fc6f7e9c7bf9bc4a45f793dd52f2b7db Mon Sep 17 00:00:00 2001
From: Amadeusz Iwanowski <amadeusz.iwanowski@syncron.com>
Date: Thu, 14 Jun 2018 18:15:10 +0200
Subject: [PATCH 4/6] Fix position computation on vertical scroll

Top position should not be zero when table is in modal.
This caused a problem. When scrolling the header would blink.
Copied top value from function setPositionValues.
---
 js/jquery.stickytableheaders.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/js/jquery.stickytableheaders.js b/js/jquery.stickytableheaders.js
index a8333a7..24cd261 100644
--- a/js/jquery.stickytableheaders.js
+++ b/js/jquery.stickytableheaders.js
@@ -177,14 +177,14 @@
 
 					if (scrolledPastTop && notScrolledPastBottom) {
 						base.leftOffset = offset.left - scrollLeft + base.options.leftOffset;
+						base.topOffset = newTopOffset;
 						base.$originalHeader.css({
 							'position': 'fixed',
 							'margin-top': base.options.marginTop,
-														'top': 0,
+							'top': base.topOffset - (base.isWindowScrolling ? 0 : base.$window.scrollTop()),
 							'left': base.leftOffset,
 							'z-index': base.options.zIndex
 						});
-						base.topOffset = newTopOffset;
 						base.$clonedHeader.css('display', '');
 						if (!base.isSticky) {
 							base.isSticky = true;

From 12c0b15477c85406d5cc07046edac421f8df8ee0 Mon Sep 17 00:00:00 2001
From: Amadeusz Iwanowski <amadeusz.iwanowski@syncron.com>
Date: Thu, 14 Jun 2018 18:31:34 +0200
Subject: [PATCH 5/6] Add dynamicTopOffset option

User can provide a function which computes the offset.
It can be useful, when one uses sticky menu above sticky headers and
position of sticky menu can change on scroll.
---
 js/jquery.stickytableheaders.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/js/jquery.stickytableheaders.js b/js/jquery.stickytableheaders.js
index 24cd261..84c6ecc 100644
--- a/js/jquery.stickytableheaders.js
+++ b/js/jquery.stickytableheaders.js
@@ -18,7 +18,8 @@
 			cacheHeaderWidth: false,
 			cacheClippingContainerWidth: true,
 			zIndex: 3,
-			clippingContainerId: null
+			clippingContainerId: null,
+			dynamicTopOffset: function() { return 0; }
 		};
 
 	function Plugin (el, options) {
@@ -151,12 +152,13 @@
 			if (base.$el) {
 				base.$el.each(function () {
 					var $this = $(this),
-						newTopOffset = base.isWindowScrolling ? (
+						dynamicTopOffset = base.options.dynamicTopOffset(),
+						newTopOffset = dynamicTopOffset + (base.isWindowScrolling ? (
 									isNaN(base.options.fixedOffset) ?
 									base.options.fixedOffset.outerHeight() :
 									base.options.fixedOffset
 								) :
-								base.$scrollableArea.offset().top + (!isNaN(base.options.fixedOffset) ? base.options.fixedOffset : 0),
+								base.$scrollableArea.offset().top + (!isNaN(base.options.fixedOffset) ? base.options.fixedOffset : 0)),
 						offset = $this.offset(),
 
 						scrollTop = base.$scrollableArea.scrollTop() + newTopOffset,

From fb748f82b5aec24e37f55fcc358399bd883f24d6 Mon Sep 17 00:00:00 2001
From: Amadeusz Iwanowski <amadeusz.iwanowski@syncron.com>
Date: Thu, 14 Jun 2018 18:56:54 +0200
Subject: [PATCH 6/6] Eliminate blinking during initialization and
 updateOptions

We don't want to use debounced functions during initialization
to prevent blinking.
---
 js/jquery.stickytableheaders.js | 30 +++++++++++++++++-------------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/js/jquery.stickytableheaders.js b/js/jquery.stickytableheaders.js
index 84c6ecc..3ad661e 100644
--- a/js/jquery.stickytableheaders.js
+++ b/js/jquery.stickytableheaders.js
@@ -81,8 +81,8 @@
 			
 			base.$clonedHeader.find("input, select").attr("disabled", true);
 
-			base.updateWidth();
 			base.toggleHeaders();
+			base.updateWidth();
 			base.updateHeaderCssPropertyClip();
 			base.bind();
 		};
@@ -116,24 +116,24 @@
 		};
 
 		base.bind = function(){
-			base.$scrollableArea.on('scroll.' + name, base.toggleHeaders);
+			base.$scrollableArea.on('scroll.' + name, base.debouncedToggleHeaders);
 			if (!base.isWindowScrolling) {
 				base.$window.on('scroll.' + name + base.id, base.setPositionValues);
-				base.$window.on('scroll.' + name + base.id, base.toggleHeaders);
-				base.$window.on('resize.' + name + base.id, base.toggleHeaders);
+				base.$window.on('scroll.' + name + base.id, base.debouncedToggleHeaders);
+				base.$window.on('resize.' + name + base.id, base.debouncedToggleHeaders);
 			}
-			base.$scrollableArea.on('resize.' + name, base.toggleHeaders);
-			base.$scrollableArea.on('resize.' + name, base.updateWidth);
+			base.$scrollableArea.on('resize.' + name, base.debouncedToggleHeaders);
+			base.$scrollableArea.on('resize.' + name, base.debouncedUpdateWidth);
 		};
 
 		base.unbind = function(){
 			// unbind window events by specifying handle so we don't remove too much
-			base.$scrollableArea.off('.' + name, base.toggleHeaders);
+			base.$scrollableArea.off('.' + name, base.debouncedToggleHeaders);
 			if (!base.isWindowScrolling) {
 				base.$window.off('.' + name + base.id, base.setPositionValues);
-				base.$window.off('.' + name + base.id, base.toggleHeaders);
+				base.$window.off('.' + name + base.id, base.debouncedToggleHeaders);
 			}
-			base.$scrollableArea.off('.' + name, base.updateWidth);
+			base.$scrollableArea.off('.' + name, base.debouncedUpdateWidth);
 		};
 
 		// We debounce the functions bound to the scroll and resize events
@@ -148,7 +148,7 @@
 			};
 		};
 
-		base.toggleHeaders = base.debounce(function () {
+		base.toggleHeaders = function () {
 			if (base.$el) {
 				base.$el.each(function () {
 					var $this = $(this),
@@ -205,7 +205,9 @@
 					}
 				});
 			}
-		}, 0);
+		};
+
+		base.debouncedToggleHeaders = base.debounce(base.toggleHeaders, 0);
 
 		base.setPositionValues = base.debounce(function () {
 			var winScrollTop = base.$window.scrollTop(),
@@ -221,7 +223,7 @@
 			});
 		}, 0);
 
-		base.updateWidth = base.debounce(function () {
+		base.updateWidth = function () {
 			if (!base.isSticky) {
 				return;
 			}
@@ -245,7 +247,9 @@
 			if (base.options.cacheHeaderWidth) {
 				base.cachedHeaderWidth = base.$clonedHeader.width();
 			}
-		}, 0);
+		};
+
+		base.debouncedUpdateWidth = base.debounce(base.updateWidth, 0);
 
 		base.updateHeaderCssPropertyClip = function() {
 			if (base.$clippingContainer.length === 0) {
