javascript - 位置粘性在 mozilla 和 safari 中都不起作用

Question

Position sticky 在 mozilla 和 safari 浏览器中都不起作用，但在 chrome 中它工作得很好。有没有人可以帮助我..我知道我们可以通过许多其他方式做到这一点，即“javaScript”，但我不想在其中使用 javaScript。

table thead th { position: -webkit-sticky; position: sticky; top: -1px; background: #ccc;}
.table-div {max-height: 200px; overflow: auto;}
.table-div table td {min-width: 200px;}

    <div class="container">
    <div class="row nopadding">
    <div class="table-div table-responsive">
    <table class="table table-bordered">
        <thead>
            <th>head1</th>
            <th>head1</th>
            <th>head1</th>
            <th>head1</th>
        </thead>
        <tbody>
            <tr>
                <td style="height: 50px;"></td>
                <td style="height: 50px;"></td>
                <td style="height: 50px;"></td>
                <td style="height: 50px;"></td>
            </tr>
            <tr>
                <td style="height: 50px;"></td>
                <td style="height: 50px;"></td>
                <td style="height: 50px;"></td>
                <td style="height: 50px;"></td>
            </tr>
            <tr>
                <td style="height: 50px;"></td>
                <td style="height: 50px;"></td>
                <td style="height: 50px;"></td>
                <td style="height: 50px;"></td>
            </tr>
            <tr>
                <td style="height: 50px;"></td>
                <td style="height: 50px;"></td>
                <td style="height: 50px;"></td>
                <td style="height: 50px;"></td>
            </tr>
        </tbody>
     </table>
     </div>
     </div>
     </div>

Answer 1

Position: sticky 不是标准，所以它可能会起作用，具体取决于浏览器和版本，甚至您需要在网络浏览器配置中设置一些标志。

您可以在此处查看此可用性:

http://caniuse.com/#feat=css-sticky

如您所见，在已知问题中:

Chrome、Firefox 和 Safari 7 及以下版本似乎不支持粘性表格标题。 (另请参阅 Firefox 错误)