方案一：
思路：当table在父容器中滑动滚动条显示内容时，使用scrollTop判断边界，同时使用JQuery中的clone方法，把原table创建复制一份，插入到动态创建的一个div中，再将该div的position设置为fixed,height设置table中的thread的高度即可。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格顶部悬浮效果</title>
<!-- <script src="jquery-latest.js"></script> -->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
html {
width: 100%;
height: auto;
overflow-x: hidden;
}
body {
text-align: left;
width: 100%;
background: #e9dfc7;
overflow-y: scroll;
}
.container {
width: 980px;
margin: 0 auto;
}
.top {
height: 100px;
background-color: #80ff80;
}
.table {
margin-top: 50px;
background-color: #f0f0f0;
}
.table thead {
height: 50px;
border: 1px solid;
}
.table thead th {
border: 1px solid;
}
.table tr td,
.table tr th {
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="top"></div>
<table id="scroll_bar" class="table container" cellspacing="0">
<thead>
<tr id="bar_head">
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
<th>表头4</th>
<th>表头5</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>5</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>5</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>5</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>5</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>5</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>5</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>5</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>5</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>5</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>5</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>5</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>5</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>5</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>5</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
<script>
$(function() {
console.log("输出th各个元素本身的宽度(不包括padding\border)");
var colWidths = $("#bar_head th").map(function() {
console.log($(this).text() + ";" + $(this).width());
});
console.log("输出th各个元素的内部宽度(包括padding，不包括border)");
var colWidths = $("#bar_head th").map(function() {
console.log($(this).text() + ";" + $(this).innerWidth());
});
console.log("输出th各个元素的外部宽度(包括padding\border)");
var colWidths = $("#bar_head th").map(function() {
console.log($(this).text() + ";" + $(this).outerWidth());
});
console.log("输出th各个元素的offset");
var colWidths = $("#bar_head th").map(function() {
console.log($(this).text() + ";");
console.log($(this).offset());
});
var scroll_bar = $("#scroll_bar"); //表格的id
var bar_head = $("#bar_head"); //表头
var bar_height = bar_head.height(); //表头高
var sroll_header = scroll_bar.clone().attr('id', 'bb'); //更改复制的表格id
$(window).scroll(function() {
console.log($('html,body').scrollTop());
var scroll_top = $('html,body').scrollTop() - scroll_bar.offset().top; //判断是否到达窗口顶部
if (scroll_top > 0) {
console.log(456);
$('body').append('<div id="shelter"></div>'); //复制的表格所在的容器
$("#shelter").css({
'height': bar_height,
'position': 'fixed',
'top': '0',
'overflow': 'hidden',
'width': '980px',
'margin': '0 auto',
'left': '0',
'right': '0',
'border-bottom': '1px solid #c8c8c8'
});
sroll_header.appendTo('#shelter');
$('#shelter table').removeClass(); //删除table原来有的默认class，防止margin,padding等值影响样式
$('#shelter table').css({
'width': '980px',
'background-color': '#f0f0f0',
'margin': '0 auto'
});
$('#shelter table tr th').css('height', bar_height); //此处可以自行发挥
$('#shelter table tr td').css({
'padding': '20px',
'text-align': 'center'
});
$('#shelter').show();
} else {
$('#shelter').hide();
}
});
});
</script>
</body>
</html>方案二：
思路：当table在父容器中滑动滚动条显示内容时，使用scrollTop判断边界，设置table中thread中的tr的position属性为fixed,再设置tr的高度、tr中各个th宽度即可。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格顶部悬浮效果</title>
<!-- <script src="jquery-latest.js"></script> -->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
html {
width: 100%;
height: auto;
overflow-x: hidden;
}
body {
text-align: left;
width: 100%;
background: #e9dfc7;
overflow-y: scroll;
}
.container {
width: 980px;
margin: 0 auto;
}
.top {
height: 100px;
background-color: #80ff80;
}
.table {
margin-top: 50px;
background-color: #f0f0f0;
}
.table thead {
height: 50px;
border: 1px solid;
}
.table thead th {
border: 1px solid;
}
.table tr td,
.table tr th {
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="top"></div>
<table id="scroll_bar" class="table container" cellspacing="0">
<thead>
<tr id="bar_head">
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
<th>表头4</th>
<th>表头5</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>5</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>5</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>5</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>5</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>5</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>5</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>5</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>5</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>5</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>5</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>5</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>5</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>5</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>5</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
<script>
$(function() {
console.log("输出th各个元素本身的宽度(不包括padding\border)");
var colWidths = $("#bar_head th").map(function() {
console.log($(this).text() + ";" + $(this).width());
});
console.log("输出th各个元素的内部宽度(包括padding，不包括border)");
var colWidths = $("#bar_head th").map(function() {
console.log($(this).text() + ";" + $(this).innerWidth());
});
console.log("输出th各个元素的外部宽度(包括padding\border)");
var colWidths = $("#bar_head th").map(function() {
console.log($(this).text() + ";" + $(this).outerWidth());
});
console.log("输出th各个元素的offset");
var colWidths = $("#bar_head th").map(function() {
console.log($(this).text() + ";");
console.log($(this).offset());
});
var scroll_bar = $("#scroll_bar"); //表格的id
//thread中的tr行，为表头，不要使用thread来
var tableHeader = scroll_bar.find("#bar_head");
//thread中的tr行旧的样式
var oldPosition = tableHeader.css("position");
//thread中的tr行中各th的宽度
var colsWidths = tableHeader.find("th").map(function() {
return $(this).outerWidth();
});
console.log("各列宽", colsWidths);
//thread中的tr行的宽度、高度
var height = tableHeader.outerHeight();
var width = tableHeader.outerWidth();
console.log("宽x高", width + "x" + height);
//滚动事件
$(window).scroll(function() {
//注意html,body中scrollTop的获取， $('body')在有的浏览器中无效
var scroll_top = $('html,body').scrollTop() - scroll_bar.offset().top; //判断是否到达窗口顶部
if (scroll_top > 0) {
//当滑动卷起时，fixed固定表头
if (tableHeader.css("position") != "fixed") {
tableHeader.css("position", "fixed");
//fixed后，thread中的tr行脱离了文档流，所以重新设置宽度、位置，与固定前保持一致
tableHeader.css("top", "0px");
tableHeader.outerWidth(width);
//设置背色，若不设置，fixed后变透明了
tableHeader.css("background-color", "#f0f0f0");
//fixed后，thread中的tr行脱离了文档流，所以重新设置表头各列宽度，与固定前保持一致
//也与各列宽度一致
var headers = tableHeader.find("th");
for (var i = 0; i < headers.length; i++)
$(headers[i]).outerWidth(colsWidths[i]);
}
} else {
//滚动条滑到顶部时，还原设置,取消表头的固定
if (tableHeader.css("position") == "fixed")
tableHeader.css("position", oldPosition);
}
});
});
</script>
</body>
</html>$('body').scrollTop()无效
$('body').scrollTop()无效。
$(’html').scrollTop()是有效的
为了防止其它浏览器这样，我们就可以写成：
$('html,body').scrollTop()
910
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
