本文介绍了修正了可滚动div内的表头的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

首先，确实存在多个类似的问题，但他们不适合我的情况。，

结构就像页面> div> div> stuff + table

我正在使用，这里是我目前的代码

  $（'。grid-stack'）。gridstack（）;

  table，th，td {border：1px纯黑色; border-collapse：collapse;} < script src => https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js\"></script><script src =https://cdnjs.cloudflare.com/ ajax / libs / lodash.js / 4.17.4 / lodash.min.js>< / script>< link rel =stylesheethref =https://cdnjs.cloudflare.com/ajax/libs/ gridstack.js / 0.2.6 / gridstack.min.css/>< script type =text / javascriptsrc ='https：//cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2。 6 / gridstack.min.js'>< /脚本><身体GT; < div class =grid-stack> < div class =grid-stack-itemdata-gs-x =0data-gs-y =0data-gs-width =10data-gs-height =2> < div class =grid-stack-item-content> < H3>标题< / H3> < DIV> < input type =text> < / DIV> < DIV> <按钮>按钮A< /按钮> <按钮>按钮B< /按钮> < / DIV> < DIV> < a>链接A< / a> < a>链接B< / a> < / DIV> <表> < THEAD> < TR> <的第i;可乐< /第> <的第i; COLB< /第> <的第i; COLC< /第> <的第i;冷LT; /第> < / TR> < / THEAD> < TBODY> < TR> < TD>毛里求斯< / TD> < TD>蓖麻< / TD> < td> F14 3QF< / td> < TD> dignissim.pharetra@aliquetmolestietellus.net< / TD> < / TR> < TR> < TD>圭亚那< / TD> < TD>伊努维克< / TD> < TD> 67752< / TD> < TD> Nam.porttitor@sitamet.edu< / TD> < / TR> < TR> < td>诺福克岛< / td> < TD>斯帕伍德< / TD> < TD> 10899-987< / TD> < TD> in.consectetuer@ametmetusAliquam.net< / TD> < / TR> < TR> < TD>阿富汗< / TD> < TD>圣乌尔巴诺< / TD> < TD> 7142< / TD> < TD> lectus.convallis@ornareIn.co.uk< / TD> < / TR> < TR> < TD>澳，LT; / TD> < td> Bon Accord< / td> < TD> 16-568< / TD> < TD> auctor.velit.Aliquam@consectetuerrhoncus.edu< / TD> < / TR> < TR> < TD>菲律宾< / TD> < TD>安吉里< / TD> < TD> 280294< / TD> < TD> neque.vitae@eu.org< / TD> < / TR> < TR> < TD>孟加拉< / TD> < td> Falciano del Massico< / td> < TD> 90856< / TD> < TD> id@vitae.edu< / TD> < / TR> < TR> < TD>密< / TD> < TD>迪维诺皮利斯< / TD> < TD> 45-520< / TD> < TD> scelerisque.neque@vitaesemper.co.uk< / TD> < / TR> < TR> < td>安提瓜和巴布达< / td> < TD> Dudzele< / TD> < TD> 728363< / TD> < TD> dignissim.tempor.arcu@vulputate.net< / TD> < / TR> < TR> < td>巴布亚新几内亚< / td> < TD>茹埃莱图尔< / TD> < TD> 958173< / TD> < TD> amet@eleifendnondapibus.net< / TD> < / TR> < TR> < td>香港< / td> < TD>黑德< / TD> < TD> 83548-761< / TD> < TD> fringilla.purus@enimnec.com< / TD> < / TR> < TR> < TD>伊朗< / TD> < TD>明托< / TD> < TD> 80622< / TD> < TD> adipiscing.ligula@fringillaDonec.edu< / TD> < / TR> < TR> < TD>库拉索< / TD> < TD>惠特< / TD> < TD> 59472< / TD> < TD> ante@anteNunc.org< / TD> < / TR> < TR> < td>韩国，南美< / td> < TD>蒙彼利埃< / TD> < td> L8 2TT< / td> < TD> a@sagittisDuisgravida.org< / TD> < / TR> < TR> < td>巴布亚新几内亚< / td> < TD>多克姆< / TD> < TD> 205204< / TD> < TD> sed.libero@convallisest.co.uk< / TD> < / TR> < TR> < td>新西兰< / td> < TD> Maisires< / TD> < TD> 9279< / TD> < TD> ultrices.posuere.cubilia@sem.org< / TD> < / TR> < TR> < TD>巴拿马< / TD> < TD>兰克韦尔< / TD> < TD> 30910< / TD> < TD> elit.fermentum@odio.org< / TD> < / TR> < TR> < td>新西兰< / td> < TD> Melsele< / TD> < TD> 23428< / TD> < TD> sed.libero.Proin@nequevitaesemper.com< / TD> < / TR> < TR> < TD>古巴< / TD> < TD> Wolvertem< / TD> < TD> 93687-468< / TD> < TD> auctor.odio@pellentesqueafacilisis.edu< / TD> < / TR> < TR> < TD>印度尼西亚< / TD> < TD>罗撒西< / TD> < TD> 919761< / TD> < TD> augue.scelerisque@asollicitudin.com< / TD> < / TR> < TR> < TD>日本< / TD> < TD>伊努维克< / TD> < TD> 2899< / TD> < TD> massa.non@ligulaDonecluctus.org< / TD> < / TR> < TR> < TD>毛里求斯< / TD> < TD>塞特兹< / TD> < TD> 603912< / TD> < TD> consequat@diamPellentesquehabitant.edu< / TD> < / TR> < TR> < TD>库拉索< / TD> < TD>林肯< / TD> < TD> 11148< / TD> < TD> tristique.neque@Nullamlobortis.org< / TD> < / TR> < TR> < TD>史瓦济兰< / TD> < TD> Newtown的< / TD> < TD> 9616< / TD> < TD> ipsum@sapien.ca< / TD> < / TR> < TR> < TD>巴西< / TD> < td>RodìMilici< / td> < TD> 861316< / TD> < TD> fames@variusultricesmauris.ca< / TD> < / TR> < / tbody的> < /表> < / DIV> < / DIV> < / div>< / body>

/ h1>

在 div 内滚动时没有什么特别之处，您首先会想到输入， links ，...然后通过表格

预期行为

滚动时，当标题碰到 div 的顶部时，标题应该固定在 div （不是页面的顶部）。当滚动回来时，标题应该回到正常状态。

不需要检查div的结尾以隐藏标题。 div的结尾永远是表格的结尾。

这怎么能实现？标题不应该固定在页面的顶部，但 div的顶部

注意：这应该也适用于IE11 p>

  table thead tr：nth-child（1）th {
 background：RED; 
位置：粘性; 
 top：0; 
 z-index：10; 
}

$（'。grid-stack'）。gridstack（）;
table，th，td {border：1px纯黑; border-collapse：collapse;} table thead tr：nth-child（1）th {background：RED;位置：粘性; top：0; z-index：10; } < script src =https：// cdnjs .cloudflare.com / ajax / libs / jquery / 3.2.1 / jquery.min.js>< / script>< script src =https://cdnjs.cloudflare.com/ajax/libs/lodash。 js / 4.17.4 / lodash.min.js>< / script>< link rel =stylesheethref =https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2。 6 / gridstack.min.css/>< script type =text / javascriptsrc ='https：//cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.6/gridstack.min。 JS'>< /脚本><身体GT; < div class =grid-stack> < div class =grid-stack-itemdata-gs-x =0data-gs-y =0data-gs-width =10data-gs-height =2> < div class =grid-stack-item-content> < H3>标题< / H3> < DIV> < input type =text> < / DIV> < DIV> <按钮>按钮A< /按钮> <按钮>按钮B< /按钮> < / DIV> < DIV> < a>链接A< / a> < a>链接B< / a> < / DIV> <表> < THEAD> < TR> <的第i;可乐< /第> <的第i; COLB< /第> <的第i; COLC< /第> <的第i;冷LT; /第> < / TR> < / THEAD> < TBODY> < TR> < TD>毛里求斯< / TD> < TD>蓖麻< / TD> < td> F14 3QF< / td> < TD> dignissim.pharetra@aliquetmolestietellus.net< / TD> < / TR> < TR> < TD>圭亚那< / TD> < TD>伊努维克< / TD> < TD> 67752< / TD> < TD> Nam.porttitor@sitamet.edu< / TD> < / TR> < TR> < td>诺福克岛< / td> < TD>斯帕伍德< / TD> < TD> 10899-987< / TD> < TD> in.consectetuer@ametmetusAliquam.net< / TD> < / TR> < TR> < TD>阿富汗< / TD> < TD>圣乌尔巴诺< / TD> < TD> 7142< / TD> < TD> lectus.convallis@ornareIn.co.uk< / TD> < / TR> < TR> < TD>澳，LT; / TD> < td> Bon Accord< / td> < TD> 16-568< / TD> < TD> auctor.velit.Aliquam@consectetuerrhoncus.edu< / TD> < / TR> < TR> < TD>菲律宾< / TD> < TD>安吉里< / TD> < TD> 280294< / TD> < TD> neque.vitae@eu.org< / TD> < / TR> < TR> < TD>孟加拉< / TD> < td> Falciano del Massico< / td> < TD> 90856< / TD> < TD> id@vitae.edu< / TD> < / TR> < TR> < TD>密< / TD> < TD>迪维诺皮利斯< / TD> < TD> 45-520< / TD> < TD> scelerisque.neque@vitaesemper.co.uk< / TD> < / TR> < TR> < td>安提瓜和巴布达< / td> < TD> Dudzele< / TD> < TD> 728363< / TD> < TD> dignissim.tempor.arcu@vulputate.net< / TD> < / TR> < TR> < td>巴布亚新几内亚< / td> < TD>茹埃莱图尔< / TD> < TD> 958173< / TD> < TD> amet@eleifendnondapibus.net< / TD> < / TR> < TR> < td>香港< / td> < TD>黑德< / TD> < TD> 83548-761< / TD> < TD> fringilla.purus@enimnec.com< / TD> < / TR> < TR> < TD>伊朗< / TD> < TD>明托< / TD> < TD> 80622< / TD> < TD> adipiscing.ligula@fringillaDonec.edu< / TD> < / TR> < TR> < TD>库拉索< / TD> < TD>惠特< / TD> < TD> 59472< / TD> < TD> ante@anteNunc.org< / TD> < / TR> < TR> < td>韩国，南美< / td> < TD>蒙彼利埃< / TD> < td> L8 2TT< / td> < TD> a@sagittisDuisgravida.org< / TD> < / TR> < TR> < td>巴布亚新几内亚< / td> < TD>多克姆< / TD> < TD> 205204< / TD> < TD> sed.libero@convallisest.co.uk< / TD> < / TR> < TR> < td>新西兰< / td> < TD>麦思?? RES< / TD> < TD> 9279< / TD> < TD> ultrices.posuere.cubilia@sem.org< / TD> < / TR> < TR> < TD>巴拿马< / TD> < TD>兰克韦尔< / TD> < TD> 30910< / TD> < TD> elit.fermentum@odio.org< / TD> < / TR> < TR> < td>新西兰< / td> < TD> Melsele< / TD> < TD> 23428< / TD> < TD> sed.libero.Proin@nequevitaesemper.com< / TD> < / TR> < TR> < TD>古巴< / TD> < TD> Wolvertem< / TD> < TD> 93687-468< / TD> < TD> auctor.odio@pellentesqueafacilisis.edu< / TD> < / TR> < TR> < TD>印度尼西亚< / TD> < TD>罗撒西< / TD> < TD> 919761< / TD> < TD> augue.scelerisque@asollicitudin.com< / TD> < / TR> < TR> < TD>日本< / TD> < TD>伊努维克< / TD> < TD> 2899< / TD> < TD> massa.non@ligulaDonecluctus.org< / TD> < / TR> < TR> < TD>毛里求斯< / TD> < TD>塞特兹< / TD> < TD> 603912< / TD> < TD> consequat@diamPellentesquehabitant.edu< / TD> < / TR> < TR> < TD>库拉索< / TD> < TD>林肯< / TD> < TD> 11148< / TD> < TD> tristique.neque@Nullamlobortis.org< / TD> < / TR> < TR> < TD>史瓦济兰< / TD> < TD> Newtown的< / TD> < TD> 9616< / TD> < TD> ipsum@sapien.ca< / TD> < / TR> < TR> < TD>巴西< / TD> < td>RodìMilici< / td> < TD> 861316< / TD> < TD> fames@variusultricesmauris.ca< / TD> < / TR> < / tbody的> < /表> < / DIV> < / DIV> < / body>

First of all, there are indeed multiple similar questions but they are not working in my case. Related, Other related
The structure is like page > div > div > stuff + table
I am using Gridstack.js and here is my current code
$('.grid-stack').gridstack();
table, th, td { border: 1px solid black; border-collapse: collapse; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.6/gridstack.min.css" /> <script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.6/gridstack.min.js'></script> <body> <div class="grid-stack"> <div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="10" data-gs-height="2"> <div class="grid-stack-item-content"> <h3>Title</h3> <div> <input type="text"> </div> <div> <button>Button A</button> <button>Button B</button> </div> <div> <a>Link A</a> <a>Link B</a> </div> <table> <thead> <tr> <th>ColA</th> <th>ColB</th> <th>ColC</th> <th>ColD</th> </tr> </thead> <tbody> <tr> <td>Mauritius</td> <td>Castor</td> <td>F14 3QF</td> <td>dignissim.pharetra@aliquetmolestietellus.net</td> </tr> <tr> <td>Guyana</td> <td>Inuvik</td> <td>67752</td> <td>Nam.porttitor@sitamet.edu</td> </tr> <tr> <td>Norfolk Island</td> <td>Sparwood</td> <td>10899-987</td> <td>in.consectetuer@ametmetusAliquam.net</td> </tr> <tr> <td>Afghanistan</td> <td>Sant'Urbano</td> <td>7142</td> <td>lectus.convallis@ornareIn.co.uk</td> </tr> <tr> <td>Macao</td> <td>Bon Accord</td> <td>16-568</td> <td>auctor.velit.Aliquam@consectetuerrhoncus.edu</td> </tr> <tr> <td>Philippines</td> <td>Anghiari</td> <td>280294</td> <td>neque.vitae@eu.org</td> </tr> <tr> <td>Bangladesh</td> <td>Falciano del Massico</td> <td>90856</td> <td>id@vitae.edu</td> </tr> <tr> <td>Micronesia</td> <td>Divinópolis</td> <td>45-520</td> <td>scelerisque.neque@vitaesemper.co.uk</td> </tr> <tr> <td>Antigua and Barbuda</td> <td>Dudzele</td> <td>728363</td> <td>dignissim.tempor.arcu@vulputate.net</td> </tr> <tr> <td>Papua New Guinea</td> <td>Joué-lès-Tours</td> <td>958173</td> <td>amet@eleifendnondapibus.net</td> </tr> <tr> <td>Hong Kong</td> <td>Gateshead</td> <td>83548-761</td> <td>fringilla.purus@enimnec.com</td> </tr> <tr> <td>Iran</td> <td>Minto</td> <td>80622</td> <td>adipiscing.ligula@fringillaDonec.edu</td> </tr> <tr> <td>Curaçao</td> <td>Whitby</td> <td>59472</td> <td>ante@anteNunc.org</td> </tr> <tr> <td>Korea, South</td> <td>Montpelier</td> <td>L8 2TT</td> <td>a@sagittisDuisgravida.org</td> </tr> <tr> <td>Papua New Guinea</td> <td>Dokkum</td> <td>205204</td> <td>sed.libero@convallisest.co.uk</td> </tr> <tr> <td>New Zealand</td> <td>Maisires</td> <td>9279</td> <td>ultrices.posuere.cubilia@sem.org</td> </tr> <tr> <td>Panama</td> <td>Rankweil</td> <td>30910</td> <td>elit.fermentum@odio.org</td> </tr> <tr> <td>New Zealand</td> <td>Melsele</td> <td>23428</td> <td>sed.libero.Proin@nequevitaesemper.com</td> </tr> <tr> <td>Cuba</td> <td>Wolvertem</td> <td>93687-468</td> <td>auctor.odio@pellentesqueafacilisis.edu</td> </tr> <tr> <td>Indonesia</td> <td>Rothesay</td> <td>919761</td> <td>augue.scelerisque@asollicitudin.com</td> </tr> <tr> <td>Japan</td> <td>Inuvik</td> <td>2899</td> <td>massa.non@ligulaDonecluctus.org</td> </tr> <tr> <td>Mauritius</td> <td>Zeitz</td> <td>603912</td> <td>consequat@diamPellentesquehabitant.edu</td> </tr> <tr> <td>Curaçao</td> <td>Lincoln</td> <td>11148</td> <td>tristique.neque@Nullamlobortis.org</td> </tr> <tr> <td>Swaziland</td> <td>Newtown</td> <td>9616</td> <td>ipsum@sapien.ca</td> </tr> <tr> <td>Brazil</td> <td>Rodì Milici</td> <td>861316</td> <td>fames@variusultricesmauris.ca</td> </tr> </tbody> </table> </div> </div> </div> </body>
Current behavior
While scrolling inside the div there is nothing special, you will first scroll thought the input, links,... then though the table
Expected behavior
While scrolling, when the header hits the top of the div - the header should be fixed on the top of the div (Not the top of the page). When scrolled back, the header should go back to its normal state.
There is no need to check for the end of the div to hide the header. The end of the div will always be the end of the table.
How can this be achieved ? The header should not be fixed to the top of the page but the top of the div
Note: this should work for IE11 also
解决方案
Add style for your table
table thead tr:nth-child(1) th{ background: RED; position: sticky; top: 0; z-index: 10; }
support of sticky
$('.grid-stack').gridstack();
table, th, td { border: 1px solid black; border-collapse: collapse; } table thead tr:nth-child(1) th{ background: RED; position: sticky; top: 0; z-index: 10; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.6/gridstack.min.css" /> <script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.6/gridstack.min.js'></script> <body> <div class="grid-stack"> <div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="10" data-gs-height="2"> <div class="grid-stack-item-content"> <h3>Title</h3> <div> <input type="text"> </div> <div> <button>Button A</button> <button>Button B</button> </div> <div> <a>Link A</a> <a>Link B</a> </div> <table> <thead> <tr> <th>ColA</th> <th>ColB</th> <th>ColC</th> <th>ColD</th> </tr> </thead> <tbody> <tr> <td>Mauritius</td> <td>Castor</td> <td>F14 3QF</td> <td>dignissim.pharetra@aliquetmolestietellus.net</td> </tr> <tr> <td>Guyana</td> <td>Inuvik</td> <td>67752</td> <td>Nam.porttitor@sitamet.edu</td> </tr> <tr> <td>Norfolk Island</td> <td>Sparwood</td> <td>10899-987</td> <td>in.consectetuer@ametmetusAliquam.net</td> </tr> <tr> <td>Afghanistan</td> <td>Sant'Urbano</td> <td>7142</td> <td>lectus.convallis@ornareIn.co.uk</td> </tr> <tr> <td>Macao</td> <td>Bon Accord</td> <td>16-568</td> <td>auctor.velit.Aliquam@consectetuerrhoncus.edu</td> </tr> <tr> <td>Philippines</td> <td>Anghiari</td> <td>280294</td> <td>neque.vitae@eu.org</td> </tr> <tr> <td>Bangladesh</td> <td>Falciano del Massico</td> <td>90856</td> <td>id@vitae.edu</td> </tr> <tr> <td>Micronesia</td> <td>Divinópolis</td> <td>45-520</td> <td>scelerisque.neque@vitaesemper.co.uk</td> </tr> <tr> <td>Antigua and Barbuda</td> <td>Dudzele</td> <td>728363</td> <td>dignissim.tempor.arcu@vulputate.net</td> </tr> <tr> <td>Papua New Guinea</td> <td>Joué-lès-Tours</td> <td>958173</td> <td>amet@eleifendnondapibus.net</td> </tr> <tr> <td>Hong Kong</td> <td>Gateshead</td> <td>83548-761</td> <td>fringilla.purus@enimnec.com</td> </tr> <tr> <td>Iran</td> <td>Minto</td> <td>80622</td> <td>adipiscing.ligula@fringillaDonec.edu</td> </tr> <tr> <td>Curaçao</td> <td>Whitby</td> <td>59472</td> <td>ante@anteNunc.org</td> </tr> <tr> <td>Korea, South</td> <td>Montpelier</td> <td>L8 2TT</td> <td>a@sagittisDuisgravida.org</td> </tr> <tr> <td>Papua New Guinea</td> <td>Dokkum</td> <td>205204</td> <td>sed.libero@convallisest.co.uk</td> </tr> <tr> <td>New Zealand</td> <td>Maisires</td> <td>9279</td> <td>ultrices.posuere.cubilia@sem.org</td> </tr> <tr> <td>Panama</td> <td>Rankweil</td> <td>30910</td> <td>elit.fermentum@odio.org</td> </tr> <tr> <td>New Zealand</td> <td>Melsele</td> <td>23428</td> <td>sed.libero.Proin@nequevitaesemper.com</td> </tr> <tr> <td>Cuba</td> <td>Wolvertem</td> <td>93687-468</td> <td>auctor.odio@pellentesqueafacilisis.edu</td> </tr> <tr> <td>Indonesia</td> <td>Rothesay</td> <td>919761</td> <td>augue.scelerisque@asollicitudin.com</td> </tr> <tr> <td>Japan</td> <td>Inuvik</td> <td>2899</td> <td>massa.non@ligulaDonecluctus.org</td> </tr> <tr> <td>Mauritius</td> <td>Zeitz</td> <td>603912</td> <td>consequat@diamPellentesquehabitant.edu</td> </tr> <tr> <td>Curaçao</td> <td>Lincoln</td> <td>11148</td> <td>tristique.neque@Nullamlobortis.org</td> </tr> <tr> <td>Swaziland</td> <td>Newtown</td> <td>9616</td> <td>ipsum@sapien.ca</td> </tr> <tr> <td>Brazil</td> <td>Rodì Milici</td> <td>861316</td> <td>fames@variusultricesmauris.ca</td> </tr> </tbody> </table> </div> </div> </div> </body>

这篇关于修正了可滚动div内的表头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！