链接悬停css在不浮动时不在表浮动标题中工作
Link hover css not working in table floating headers when not floating
只有当可浮动的表头没有浮动或完全覆盖原始表头时，链接悬停css才在表头链接中不起作用https://jsfiddle.net/jwLob72j/（或没有阴影）（请向下滚动一点，然后向上滚动以删除阴影）
jquery使标题的副本可以浮动，所以链接悬停css也可以工作，但为什么只有当浮动标题完全覆盖原始标题时才可以工作，哪里有问题可以解决？
/*
* 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>正在更改。。。
// When top of viewport is above or below table
$stickyHead.add($stickyInsct).css({
opacity: 0,
top: 0
});
对此。。。。
// When top of viewport is above or below table
$stickyHead.add($stickyInsct).css({
opacity: 1,
top: 0
});
除非我有误解，否则这似乎会产生预期的结果。
在codepen上看这个将opacity=0更改为zIndex=-1，当滚动到顶部时，thead元素被克隆的thead覆盖，这会使原始的thead位于克隆的后面，导致悬停效果不起作用。只要更改克隆的thead的zIndex就可以解决这个问题。
/**
* Created by Charlene on 2016/5/11.
*/
/*
* 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,
zIndex: 1,
top: $stickyWrap.scrollTop()
});
} else {
// When top of wrapping parent is in view
$stickyHead.add($stickyInsct).css({
//opacity: 0,
zIndex: 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,
zIndex: 1,
top: $w.scrollTop() - $t.offset().top
});
} else {
// When top of viewport is above or below table
$stickyHead.add($stickyInsct).css({
//opacity: 0,
zIndex: 0,
top: 0
});
}
}
},
repositionStickyCol = function () {
if($stickyWrap.scrollLeft() > 0) {
// When left of wrapping parent is out of view
$stickyCol.add($stickyInsct).css({
//opacity: 1,
zIndex: 1,
left: $stickyWrap.scrollLeft()
});
} else {
// When left of wrapping parent is in view
$stickyCol
//.css({ opacity: 0 })
.css({ zIndex: 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>
<script src="stackoverflow.js"></script>
<link rel="stylesheet" type="text/css" href="stackoverflow.css">
<table>
<thead style="opacity: 1;">
<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>相关文章：
- 链接悬停css在不浮动时不在表浮动标题中工作
- 为什么竞争不能在离子中显示(隐藏在标题下方）(离子竞争不能正常工作）
- 卷轴上的视差图像和粘滞标题无法正常工作
- 如何让 .stop 工作并确保标题在我单击时停止，而不是在我单击的位置停止
- 粘性表标题 JavaScript 无法正常工作
- 如果我们在表格标题中有可编辑的文本，选项卡功能将无法正常工作
- 无法让满意的回复标题工作
- 指令标题 AngularJS 不是它工作
- 如何在博客中的帖子标题下方显示广告，使其即使在博客的移动版上也能工作
- <br>不在工具提示的标题标记中工作
- 一种获取工作表第一行/标题中值的列的方法
- 使汉堡包ID在两个标题中工作
- 我的缩略图标题在jquery中不工作
- 添加到购物车按钮不工作-拒绝获得不安全的标题"X-JSON"
- 谷歌Chrome扩展文件.标题不工作
- Wordpress Get标题变量不工作
- 固定标题位置在滚动-如果其他不工作
- 代码不工作(请更新标题，当你知道你在问什么)
- 更新:增加更多的控制:隐藏标题上的滚动和工作从一定的宽度大小
- 离子标题栏不能与侧边菜单和滑动框一起工作
