我的主页在div下面有一个div和一个iframe。 div高度为500px。我正在调整iframe高度，根据其内容高度。 iframe里面有一张桌子。当我向下滚动主页面，并且表格到达页面顶部时，我需要表格的标题，要修复，并且表格主体可滚动。我试过下面的代码。花了大约3个小时就可以了。仍然无法让它发挥作用:(。
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<form id="form_init" onsubmit="return onSubmitHandler();" method="POST" target="iFrame1" action="process.php" name="form_init"></form>
<div class="content">
<fieldset>
<legend><span>Search using Keywords</span></legend>
<input type="text" placeholder="Enter Keywords">
<input type="submit" class="button" value="Search" onclick="submited=this.id;">
</fieldset>
</div>
<div id="iframeWrapper" style="display: inline;">
<iframe id="iFrame1" style="display: inline; height: 200px;" name="iFrame1" src="process.php">
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<form id="iFrm_search_res" method="" name="iFrm_search_res">
<div class="SearchResults">
<table id="searchResultTab" id="innerTable">
<tbody>
<tr class="fix-header">
<th>Header1</th>
<th>Header2</th>
<th>Header3</th>
<th>Header4</th>
<th>Header5</th>
</tr>
<tr>
<td>Row1</td>
<td>Row1</td>
<td>Row1</td>
<td>Row1</td>
<td>Row1</td>
</tr>
<tr>
<td>Row2</td>
<td>Row2</td>
<td>Row2</td>
<td>Row2</td>
<td>Row2</td>
</tr>
<tr>
<td>Row3</td>
<td>Row3</td>
<td>Row3</td>
<td>Row3</td>
<td>Row3</td>
</tr>
<tr>
<td>Row4</td>
<td>Row4</td>
<td>Row4</td>
<td>Row4</td>
<td>Row4</td>
</tr>
<tr>
<td>Row5</td>
<td>Row5</td>
<td>Row5</td>
<td>Row5</td>
<td>Row5</td>
</tr>
<tr>
<td>Row6</td>
<td>Row6</td>
<td>Row6</td>
<td>Row6</td>
<td>Row6</td>
</tr>
<tr>
<td>Row7</td>
<td>Row7</td>
<td>Row7</td>
<td>Row7</td>
<td>Row7</td>
</tr>
<tr>
<td>Row8</td>
<td>Row8</td>
<td>Row8</td>
<td>Row8</td>
<td>Row8</td>
</tr>
<tr>
<td>Row9</td>
<td>Row9</td>
<td>Row9</td>
<td>Row9</td>
<td>Row9</td>
</tr>
<tr>
<td>Row10</td>
<td>Row10</td>
<td>Row10</td>
<td>Row10</td>
<td>Row10</td>
</tr>
<tr>
<td>Row11</td>
<td>Row11</td>
<td>Row11</td>
<td>Row11</td>
<td>Row11</td>
</tr>
<tr>
<td>Row12</td>
<td>Row12</td>
<td>Row12</td>
<td>Row12</td>
<td>Row12</td>
</tr>
<tr>
<td>Row13</td>
<td>Row13</td>
<td>Row13</td>
<td>Row13</td>
<td>Row13</td>
</tr>
<tr>
<td>Row14</td>
<td>Row14</td>
<td>Row14</td>
<td>Row14</td>
<td>Row14</td>
</tr>
<tr>
<td>Row15</td>
<td>Row15</td>
<td>Row15</td>
<td>Row15</td>
<td>Row15</td>
</tr>
</tbody>
</table>
</div>
</form>
</body>
</html>
</iframe>
</div>
</body>
</html>
使用Javascript：
var reached_top = $('#iFrame1').offset().top;
$(window).scroll(function(){
if ($(this).scrollTop() > reached_top+5){
$("#iframeWrapper").css({'position': 'fixed', 'top': '0px'});
$("#iFrame1").contents().find("#fix-header").css({'position': 'fixed', 'top': '0px'});
}
else{
$("#iframeWrapper").css({'position': 'relative'});
}
});
请注意，iframe代码是从另一个页面＆＃34; process.php＆＃34;生成的。我已经从浏览器页面源复制了代码。