修复了可滚动div

时间：2017-05-17 14:01:40

标签： html css gridstack

首先，确实有多个类似的问题，但它们在我的情况下不起作用。 Related，Other related

结构类似于page > div > div > stuff + table

我正在使用Gridstack.js，这是我当前的代码

$('.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>

当前行为

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

预期行为

滚动时，当标题点击div的顶部时 - 标题应固定在div的顶部（不在页面顶部）。向后滚动时，标题应该恢复正常状态。

无需检查div的末尾以隐藏标题。 div的结尾总是表的结尾。

如何实现这一目标？标题不应固定在页面顶部，而应固定在div

的顶部

注意：这也适用于IE11

2 个答案:

答案 0 :(得分：2)

为您的表添加样式

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>Maisires</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>

答案 1 :(得分：1)

可以使用CSS position: fixed和jQuery脚本完成。请查看下面的代码段或JSFiddle。

$('.grid-stack').gridstack();

$('thead th').each(function(index) {
  $('.fixed-header th').eq(index).css('width', $(this).width());
});
$('.fixed-header-container').height($('.fixed-header').height());
$('.fixed-header-container').hide();

$('.grid-stack-item-content').scroll(function() {
  var $table = $('.content-table');

  if ($table.offset().top >= 0) {
    $('.fixed-header-container').hide();
  } else if ($table.offset().top < 0) {
    $('.fixed-header-container').show();
  }
});
table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

.fixed-header {
  position: fixed;
  background-color: white;
}
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.6/gridstack.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.6/gridstack.min.css" rel="stylesheet" />

<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 fixed-header-container" style="z-index: 1 !important;">
      <table class="fixed-header">
        <tr>
          <th>ColA</th>
          <th>ColB</th>
          <th>ColC</th>
          <th>ColD</th>
        </tr>
      </table>
    </div>
    <div class="grid-stack-item-content">
      <div>
        <h3>Title</h3>
        <input type="text">
        <div>
          <button>Button A</button>
          <button>Button B</button>
        </div>
        <div>
          <a>Link A</a>
          <a>Link B</a>
        </div>
      </div>
      <table class="content-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>

相关问题
最新问题