BlackFire BlackFire - 6 months ago 13
Javascript Question

Link hover css not working in table floating headers when not floating

Link hover css not working in table header links only when the floatable headers are not floating or fully covering the original headers https://jsfiddle.net/jwLob72j/ (or without shadow)(please scroll-down a bit then scroll-up to remove shadow)

jquery makes the copy of headers to make floatable so the link hover css is also working but why only not working when floating headers fully covers the original headers, where is the problem that can be fixed?



/*
* jQuery throttle / debounce - v1.1 - 3/7/2010
* http://benalman.com/projects/jquery-throttle-debounce-plugin/
*
* Copyright (c) 2010 "Cowboy" Ben Alman
* Dual licensed under the MIT and GPL licenses.
* http://benalman.com/about/license/
*/
(function(b,c){var $=b.jQuery||b.Cowboy||(b.Cowboy={}),a;$.throttle=a=function(e,f,j,i){var h,d=0;if(typeof f!=="boolean"){i=j;j=f;f=c}function g(){var o=this,m=+new Date()-d,n=arguments;function l(){d=+new Date();j.apply(o,n)}function k(){h=c}if(i&&!h){l()}h&&clearTimeout(h);if(i===c&&m>e){l()}else{if(f!==true){h=setTimeout(i?k:l,i===c?e-m:e)}}}if($.guid){g.guid=j.guid=j.guid||$.guid++}return g};$.debounce=function(d,e,f){return f===c?a(d,e,false):a(d,f,e!==false)}})(this);









$(function(){
$('table').each(function() {
if($(this).find('thead').length > 0 && $(this).find('th').length > 0) {
// Clone <thead>
var $w = $(window),
$t = $(this),
$thead = $t.find('thead').clone(),
$col = $t.find('thead, tbody').clone();

// Add class, remove margins, reset width and wrap table
$t
.addClass('sticky-enabled')
.css({
margin: 0,
width: '100%'
}).wrap('<div class="sticky-wrap" />');

if($t.hasClass('overflow-y')) $t.removeClass('overflow-y').parent().addClass('overflow-y');

// Create new sticky table head (basic)
$t.after('<table class="sticky-thead" />');

// If <tbody> contains <th>, then we create sticky column and intersect (advanced)
if($t.find('tbody th').length > 0) {
$t.after('<table class="sticky-col" /><table class="sticky-intersect" />');
}

// Create shorthand for things
var $stickyHead = $(this).siblings('.sticky-thead'),
$stickyCol = $(this).siblings('.sticky-col'),
$stickyInsct = $(this).siblings('.sticky-intersect'),
$stickyWrap = $(this).parent('.sticky-wrap');

$stickyHead.append($thead);

$stickyCol
.append($col)
.find('thead th:gt(0)').remove()
.end()
.find('tbody td').remove();

$stickyInsct.html('<thead><tr><th>'+$t.find('thead th:first-child').html()+'</th></tr></thead>');

// Set widths
var setWidths = function () {
$t
.find('thead th').each(function (i) {
$stickyHead.find('th').eq(i).width($(this).width());
})
.end()
.find('tr').each(function (i) {
$stickyCol.find('tr').eq(i).height($(this).height());
});

// Set width of sticky table head
$stickyHead.width($t.width());

// Set width of sticky table col
$stickyCol.find('th').add($stickyInsct.find('th')).width($t.find('thead th').width())
},
repositionStickyHead = function () {
// Return value of calculated allowance
var allowance = calcAllowance();

// Check if wrapper parent is overflowing along the y-axis
if($t.height() > $stickyWrap.height()) {
// If it is overflowing (advanced layout)
// Position sticky header based on wrapper scrollTop()
if($stickyWrap.scrollTop() > 0) {
// When top of wrapping parent is out of view
$stickyHead.add($stickyInsct).css({
opacity: 1,
top: $stickyWrap.scrollTop()
});
} else {
// When top of wrapping parent is in view
$stickyHead.add($stickyInsct).css({
opacity: 0,
top: 0
});
}
} else {
// If it is not overflowing (basic layout)
// Position sticky header based on viewport scrollTop
if($w.scrollTop() > $t.offset().top && $w.scrollTop() < $t.offset().top + $t.outerHeight() - allowance) {
// When top of viewport is in the table itself
$stickyHead.add($stickyInsct).css({
opacity: 1,
top: $w.scrollTop() - $t.offset().top
});
} else {
// When top of viewport is above or below table
$stickyHead.add($stickyInsct).css({
opacity: 0,
top: 0
});
}
}
},
repositionStickyCol = function () {
if($stickyWrap.scrollLeft() > 0) {
// When left of wrapping parent is out of view
$stickyCol.add($stickyInsct).css({
opacity: 1,
left: $stickyWrap.scrollLeft()
});
} else {
// When left of wrapping parent is in view
$stickyCol
.css({ opacity: 0 })
.add($stickyInsct).css({ left: 0 });
}
},
calcAllowance = function () {
var a = 0;
// Calculate allowance
$t.find('tbody tr:lt(3)').each(function () {
a += $(this).height();
});

// Set fail safe limit (last three row might be too tall)
// Set arbitrary limit at 0.25 of viewport height, or you can use an arbitrary pixel value
if(a > $w.height()*0.25) {
a = $w.height()*0.25;
}

// Add the height of sticky header
a += $stickyHead.height();
return a;
};

setWidths();

$t.parent('.sticky-wrap').scroll($.throttle(15, function() {
repositionStickyHead();
repositionStickyCol();
}));

$w
.load(setWidths)
.resize($.debounce(250, function () {
setWidths();
repositionStickyHead();
repositionStickyCol();
}))
.scroll($.throttle(15, repositionStickyHead));
}
});
});

body{ margin:0; font-size:17px; color:#333; font-family:Arial, sans-serif; line-height:1.8em; background:#fff; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
a{ color:#333; }

table{ border-spacing:0; white-space:nowrap; cursor:default; line-height:1.4em; }
table thead th{ border:1px solid #ccc; text-align:center; vertical-align:middle; background:#339966; color:#eee; padding:16px 8px; font-weight:normal; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; -webkit-touch-callout:none; -khtml-user-select:none; }
table thead th a{ color:#fff; }
table thead th a:hover{ color:red; }
table tbody th{ border:1px solid #fff; text-align:center; vertical-align:middle; background:#ddd; color:#222; padding:16px 8px; font-weight:normal; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; -webkit-touch-callout:none; -khtml-user-select:none; }
table tbody th a{ color:#222; }
table tbody th a:hover{ color:red; }
table td{ padding:8px; border:1px solid #ccc; }
table > thead > tr > th{ vertical-align:top; }

.sticky-wrap{ position:relative; overflow-x:auto; margin:80px 1% 90px; }
.sticky-wrap .sticky-thead, .sticky-wrap .sticky-col, .sticky-wrap .sticky-intersect{ position:absolute; top:0; }
.sticky-wrap .sticky-intersect{ opacity:1; z-index:10; display:none; }
.sticky-wrap td, .sticky-wrap th{ box-sizing:border-box; }

.sticky-wrap .sticky-thead{ transition:all 0.35s 0.1s ease-in-out; -o-transition:all 0.35s 0.1s ease-in-out; -moz-transition:all 0.35s 0.1s ease-in-out; -webkit-transition:all 0.35s 0.1s ease-in-out; box-shadow:0em 1em 1em 0em rgba(0,0,0,0.7); -moz-box-shadow:0em 1em 1em 0em rgba(0,0,0,0.7); -webkit-box-shadow:0em 1em 1em 0em rgba(0,0,0,0.7); }

.sticky-wrap .sticky-col { transition:all 0.125s 0.1s ease-in-out; -o-transition:all 0.125s 0.1s ease-in-out; -moz-transition:all 0.125s 0.1s ease-in-out; -webkit-transition:all 0.125s 0.1s ease-in-out; box-shadow:1em 0em 1em 0em rgba(0,0,0,0.7); -moz-box-shadow:1em 0em 1em 0em rgba(0,0,0,0.7); -webkit-box-shadow:1em 0em 1em 0em rgba(0,0,0,0.7); }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>HHH HHH HHH HHH</th>
<th><a href="https://google.com/">Google</a></th>
<th><a href="https://yahoo.com/">Yahoo</a></th>
<th>HHH HHH HHH HHH</th>
<th>HHH HHH HHH HHH</th>
<th>HHH HHH HHH HHH</th>
<th>HHH HHH HHH HHH</th>
<th>HHH HHH HHH HHH</th>
<th>HHH HHH HHH HHH</th>
<th>HHH HHH HHH HHH</th>
</tr>
</thead>
<tbody>
<tr>
<th><a href="https://bing.com/">Bing</a></th>
<td>AAA AAA AAA AAA</td>
<td>AAA AAA AAA AAA</td>
<td>AAA AAA AAA AAA</td>
<td>AAA AAA AAA AAA</td>
<td>AAA AAA AAA AAA</td>
<td>AAA AAA AAA AAA</td>
<td>AAA AAA AAA AAA</td>
<td>AAA AAA AAA AAA</td>
<td>AAA AAA AAA AAA</td>
</tr>
<tr>
<th><a href="https://aol.com/">AOL</a></th>
<td>BBB BBB BBB BBB</td>
<td>BBB BBB BBB BBB</td>
<td>BBB BBB BBB BBB</td>
<td>BBB BBB BBB BBB</td>
<td>BBB BBB BBB BBB</td>
<td>BBB BBB BBB BBB</td>
<td>BBB BBB BBB BBB</td>
<td>BBB BBB BBB BBB</td>
<td>BBB BBB BBB BBB</td>
</tr>
<tr>
<th>CCC CCC CCC CCC</th>
<td>CCC CCC CCC CCC</td>
<td>CCC CCC CCC CCC</td>
<td>CCC CCC CCC CCC</td>
<td>CCC CCC CCC CCC</td>
<td>CCC CCC CCC CCC</td>
<td>CCC CCC CCC CCC</td>
<td>CCC CCC CCC CCC</td>
<td>CCC CCC CCC CCC</td>
<td>CCC CCC CCC CCC</td>
</tr>
<tr>
<th>DDD DDD DDD DDD</th>
<td>DDD DDD DDD DDD</td>
<td>DDD DDD DDD DDD</td>
<td>DDD DDD DDD DDD</td>
<td>DDD DDD DDD DDD</td>
<td>DDD DDD DDD DDD</td>
<td>DDD DDD DDD DDD</td>
<td>DDD DDD DDD DDD</td>
<td>DDD DDD DDD DDD</td>
<td>DDD DDD DDD DDD</td>
</tr>
<tr>
<th>AAA AAA AAA AAA</th>
<td>AAA AAA AAA AAA</td>
<td>AAA AAA AAA AAA</td>
<td>AAA AAA AAA AAA</td>
<td>AAA AAA AAA AAA</td>
<td>AAA AAA AAA AAA</td>
<td>AAA AAA AAA AAA</td>
<td>AAA AAA AAA AAA</td>
<td>AAA AAA AAA AAA</td>
<td>AAA AAA AAA AAA</td>
</tr>
<tr>
<th>BBB BBB BBB BBB</th>
<td>BBB BBB BBB BBB</td>
<td>BBB BBB BBB BBB</td>
<td>BBB BBB BBB BBB</td>
<td>BBB BBB BBB BBB</td>
<td>BBB BBB BBB BBB</td>
<td>BBB BBB BBB BBB</td>
<td>BBB BBB BBB BBB</td>
<td>BBB BBB BBB BBB</td>
<td>BBB BBB BBB BBB</td>
</tr>
<tr>
<th>CCC CCC CCC CCC</th>
<td>CCC CCC CCC CCC</td>
<td>CCC CCC CCC CCC</td>
<td>CCC CCC CCC CCC</td>
<td>CCC CCC CCC CCC</td>
<td>CCC CCC CCC CCC</td>
<td>CCC CCC CCC CCC</td>
<td>CCC CCC CCC CCC</td>
<td>CCC CCC CCC CCC</td>
<td>CCC CCC CCC CCC</td>
</tr>
<tr>
<th>DDD DDD DDD DDD</th>
<td>DDD DDD DDD DDD</td>
<td>DDD DDD DDD DDD</td>
<td>DDD DDD DDD DDD</td>
<td>DDD DDD DDD DDD</td>
<td>DDD DDD DDD DDD</td>
<td>DDD DDD DDD DDD</td>
<td>DDD DDD DDD DDD</td>
<td>DDD DDD DDD DDD</td>
<td>DDD DDD DDD DDD</td>
</tr>
<tr>
<th>AAA AAA AAA AAA</th>
<td>AAA AAA AAA AAA</td>
<td>AAA AAA AAA AAA</td>
<td>AAA AAA AAA AAA</td>
<td>AAA AAA AAA AAA</td>
<td>AAA AAA AAA AAA</td>
<td>AAA AAA AAA AAA</td>
<td>AAA AAA AAA AAA</td>
<td>AAA AAA AAA AAA</td>
<td>AAA AAA AAA AAA</td>
</tr>
<tr>
<th>BBB BBB BBB BBB</th>
<td>BBB BBB BBB BBB</td>
<td>BBB BBB BBB BBB</td>
<td>BBB BBB BBB BBB</td>
<td>BBB BBB BBB BBB</td>
<td>BBB BBB BBB BBB</td>
<td>BBB BBB BBB BBB</td>
<td>BBB BBB BBB BBB</td>
<td>BBB BBB BBB BBB</td>
<td>BBB BBB BBB BBB</td>
</tr>
<tr>
<th>CCC CCC CCC CCC</th>
<td>CCC CCC CCC CCC</td>
<td>CCC CCC CCC CCC</td>
<td>CCC CCC CCC CCC</td>
<td>CCC CCC CCC CCC</td>
<td>CCC CCC CCC CCC</td>
<td>CCC CCC CCC CCC</td>
<td>CCC CCC CCC CCC</td>
<td>CCC CCC CCC CCC</td>
<td>CCC CCC CCC CCC</td>
</tr>
<tr>
<th>DDD DDD DDD DDD</th>
<td>DDD DDD DDD DDD</td>
<td>DDD DDD DDD DDD</td>
<td>DDD DDD DDD DDD</td>
<td>DDD DDD DDD DDD</td>
<td>DDD DDD DDD DDD</td>
<td>DDD DDD DDD DDD</td>
<td>DDD DDD DDD DDD</td>
<td>DDD DDD DDD DDD</td>
<td>DDD DDD DDD DDD</td>
</tr>
<tr>
<th>AAA AAA AAA AAA</th>
<td>AAA AAA AAA AAA</td>
<td>AAA AAA AAA AAA</td>
<td>AAA AAA AAA AAA</td>
<td>AAA AAA AAA AAA</td>
<td>AAA AAA AAA AAA</td>
<td>AAA AAA AAA AAA</td>
<td>AAA AAA AAA AAA</td>
<td>AAA AAA AAA AAA</td>
<td>AAA AAA AAA AAA</td>
</tr>
<tr>
<th>BBB BBB BBB BBB</th>
<td>BBB BBB BBB BBB</td>
<td>BBB BBB BBB BBB</td>
<td>BBB BBB BBB BBB</td>
<td>BBB BBB BBB BBB</td>
<td>BBB BBB BBB BBB</td>
<td>BBB BBB BBB BBB</td>
<td>BBB BBB BBB BBB</td>
<td>BBB BBB BBB BBB</td>
<td>BBB BBB BBB BBB</td>
</tr>
<tr>
<th>CCC CCC CCC CCC</th>
<td>CCC CCC CCC CCC</td>
<td>CCC CCC CCC CCC</td>
<td>CCC CCC CCC CCC</td>
<td>CCC CCC CCC CCC</td>
<td>CCC CCC CCC CCC</td>
<td>CCC CCC CCC CCC</td>
<td>CCC CCC CCC CCC</td>
<td>CCC CCC CCC CCC</td>
<td>CCC CCC CCC CCC</td>
</tr>
<tr>
<th>DDD DDD DDD DDD</th>
<td>DDD DDD DDD DDD</td>
<td>DDD DDD DDD DDD</td>
<td>DDD DDD DDD DDD</td>
<td>DDD DDD DDD DDD</td>
<td>DDD DDD DDD DDD</td>
<td>DDD DDD DDD DDD</td>
<td>DDD DDD DDD DDD</td>
<td>DDD DDD DDD DDD</td>
<td>DDD DDD DDD DDD</td>
</tr>
<tr>
<th>AAA AAA AAA AAA</th>
<td>AAA AAA AAA AAA</td>
<td>AAA AAA AAA AAA</td>
<td>AAA AAA AAA AAA</td>
<td>AAA AAA AAA AAA</td>
<td>AAA AAA AAA AAA</td>
<td>AAA AAA AAA AAA</td>
<td>AAA AAA AAA AAA</td>
<td>AAA AAA AAA AAA</td>
<td>AAA AAA AAA AAA</td>
</tr>
<tr>
<th>BBB BBB BBB BBB</th>
<td>BBB BBB BBB BBB</td>
<td>BBB BBB BBB BBB</td>
<td>BBB BBB BBB BBB</td>
<td>BBB BBB BBB BBB</td>
<td>BBB BBB BBB BBB</td>
<td>BBB BBB BBB BBB</td>
<td>BBB BBB BBB BBB</td>
<td>BBB BBB BBB BBB</td>
<td>BBB BBB BBB BBB</td>
</tr>
<tr>
<th>CCC CCC CCC CCC</th>
<td>CCC CCC CCC CCC</td>
<td>CCC CCC CCC CCC</td>
<td>CCC CCC CCC CCC</td>
<td>CCC CCC CCC CCC</td>
<td>CCC CCC CCC CCC</td>
<td>CCC CCC CCC CCC</td>
<td>CCC CCC CCC CCC</td>
<td>CCC CCC CCC CCC</td>
<td>CCC CCC CCC CCC</td>
</tr>
<tr>
<th>DDD DDD DDD DDD</th>
<td>DDD DDD DDD DDD</td>
<td>DDD DDD DDD DDD</td>
<td>DDD DDD DDD DDD</td>
<td>DDD DDD DDD DDD</td>
<td>DDD DDD DDD DDD</td>
<td>DDD DDD DDD DDD</td>
<td>DDD DDD DDD DDD</td>
<td>DDD DDD DDD DDD</td>
<td>DDD DDD DDD DDD</td>
</tr>
<tr>
<th>AAA AAA AAA AAA</th>
<td>AAA AAA AAA AAA</td>
<td>AAA AAA AAA AAA</td>
<td>AAA AAA AAA AAA</td>
<td>AAA AAA AAA AAA</td>
<td>AAA AAA AAA AAA</td>
<td>AAA AAA AAA AAA</td>
<td>AAA AAA AAA AAA</td>
<td>AAA AAA AAA AAA</td>
<td>AAA AAA AAA AAA</td>
</tr>
<tr>
<th>BBB BBB BBB BBB</th>
<td>BBB BBB BBB BBB</td>
<td>BBB BBB BBB BBB</td>
<td>BBB BBB BBB BBB</td>
<td>BBB BBB BBB BBB</td>
<td>BBB BBB BBB BBB</td>
<td>BBB BBB BBB BBB</td>
<td>BBB BBB BBB BBB</td>
<td>BBB BBB BBB BBB</td>
<td>BBB BBB BBB BBB</td>
</tr>
<tr>
<th>CCC CCC CCC CCC</th>
<td>CCC CCC CCC CCC</td>
<td>CCC CCC CCC CCC</td>
<td>CCC CCC CCC CCC</td>
<td>CCC CCC CCC CCC</td>
<td>CCC CCC CCC CCC</td>
<td>CCC CCC CCC CCC</td>
<td>CCC CCC CCC CCC</td>
<td>CCC CCC CCC CCC</td>
<td>CCC CCC CCC CCC</td>
</tr>
<tr>
<th>DDD DDD DDD DDD</th>
<td>DDD DDD DDD DDD</td>
<td>DDD DDD DDD DDD</td>
<td>DDD DDD DDD DDD</td>
<td>DDD DDD DDD DDD</td>
<td>DDD DDD DDD DDD</td>
<td>DDD DDD DDD DDD</td>
<td>DDD DDD DDD DDD</td>
<td>DDD DDD DDD DDD</td>
<td>DDD DDD DDD DDD</td>
</tr>
<tr>
<th>AAA AAA AAA AAA</th>
<td>AAA AAA AAA AAA</td>
<td>AAA AAA AAA AAA</td>
<td>AAA AAA AAA AAA</td>
<td>AAA AAA AAA AAA</td>
<td>AAA AAA AAA AAA</td>
<td>AAA AAA AAA AAA</td>
<td>AAA AAA AAA AAA</td>
<td>AAA AAA AAA AAA</td>
<td>AAA AAA AAA AAA</td>
</tr>
<tr>
<th>BBB BBB BBB BBB</th>
<td>BBB BBB BBB BBB</td>
<td>BBB BBB BBB BBB</td>
<td>BBB BBB BBB BBB</td>
<td>BBB BBB BBB BBB</td>
<td>BBB BBB BBB BBB</td>
<td>BBB BBB BBB BBB</td>
<td>BBB BBB BBB BBB</td>
<td>BBB BBB BBB BBB</td>
<td>BBB BBB BBB BBB</td>
</tr>
<tr>
<th>CCC CCC CCC CCC</th>
<td>CCC CCC CCC CCC</td>
<td>CCC CCC CCC CCC</td>
<td>CCC CCC CCC CCC</td>
<td>CCC CCC CCC CCC</td>
<td>CCC CCC CCC CCC</td>
<td>CCC CCC CCC CCC</td>
<td>CCC CCC CCC CCC</td>
<td>CCC CCC CCC CCC</td>
<td>CCC CCC CCC CCC</td>
</tr>
<tr>
<th>DDD DDD DDD DDD</th>
<td>DDD DDD DDD DDD</td>
<td>DDD DDD DDD DDD</td>
<td>DDD DDD DDD DDD</td>
<td>DDD DDD DDD DDD</td>
<td>DDD DDD DDD DDD</td>
<td>DDD DDD DDD DDD</td>
<td>DDD DDD DDD DDD</td>
<td>DDD DDD DDD DDD</td>
<td>DDD DDD DDD DDD</td>
</tr>
</tbody>
</table>




Answer

Changing...

// When top of viewport is above or below table
$stickyHead.add($stickyInsct).css({
    opacity: 0,
    top: 0
});

to this....

// When top of viewport is above or below table
$stickyHead.add($stickyInsct).css({
     opacity: 1,
    top: 0
});

Unless I'm misunderstanding, this seems to give the desired results.