<! DOCTYPE html>
<meta charset= "Utf-8" >
<meta http-equiv= "x-ua-compatible" content= "Ie=edge" >
<meta name= "viewport" content= "Width=device-width, initial-scale=1" >
<title>bootstrap 101 Template</title>
<link rel= "stylesheet" href= "Http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css" >
<style type= "Text/css" >
. Content {
width:500px;
margin:50px 50px;
}
. header {
line-height:50px;
Background-color: #ECECEC;
}
. Data {
height:300px;
Overflow:hidden;
}
</style>
<body>
<div class= "Content" >
<div class= "header row" >
<div class= "col-md-3" > Name </div>
<div class= "col-md-3" > Sex </div>
<div class= "col-md-3" > Age </div>
<div class= "col-md-3" > Career </div>
</div>
<div class= "Data" >
<div class= "Data-content" >
<table class= "Table Table-hover" >
</table>
</div>
<div class= "Data-footer" ></div>
</div>
</div>
<script src= "Http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js" ></script>
<script src= "Http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js" ></script>
<script type= "Text/javascript" >
var html = ';
for (var i = 0; i < i++) {
HTML + = ' <tr> ';
HTML + = ' <td> Zhang San ' + i + ' </td> ';
if (i% 2 = = 0) {
HTML + = ' <td> male </td> ';
} else {
HTML + = ' <td> women </td> ';
}
HTML + = ' <td> ' + (ten + i) + ' </td> ';
HTML + = ' <td> programmer </td> ';
HTML + = ' </tr> ';
}
$ ('. Table '). HTML (HTML);
$ (' TD '). AddClass (' col-md-3 ');
var datadom = $ ('. Data ') [0];
var datacontentdom = $ ('. Data-content ') [0];
var datafooterdom = $ ('. Data-footer ') [0];
var height = datadom.offsettop + datadom.offsetheight;
SetInterval (function () {
if (datafooterdom.offsettop-datadom.scrolltop-height <= 0) {
Datadom.scrolltop-= Datacontentdom.offsetheight;
} else {
datadom.scrolltop++;
}
}, 20);
</script>
</body>
HTML fixed header, form content vertical loop scrolling