Question

我的主页在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;生成的。我已经从浏览器页面源复制了代码。

修复iframe中的表头，当它到达顶部时

0 个答案: