Javascript 表头不粘-6ren

Javascript 表头不粘

转载作者：搜寻专家更新时间：2023-10-31 22:53:15

26

4

<分区>

我尝试根据在 W3Schools 上找到的解决方案实现一个粘性表头: https://www.w3schools.com/howto/howto_js_sticky_header.asp

但是我的表格标题仍然没有响应滚动通过标题。控制台日志给出了 sticky、window.pageYOffset、header.offsetHeight 的预期值。我错过了什么吗？

我的代码总结如下:

<html lang="en">
    <head>
        <style type="text/css">
        /*...*/
                #myTable {
                    float:left;
                    width:75%;
                    background-color:#fff;
                    padding:6px;
                    margin-left:175px;
                }

                #myTable th {
                    cursor:pointer;
                    position: sticky;
                    top: 0;
                }

                #myTable th:hover {
                    background-color:#66991c;
                    color:white;
                }

                #myTable tr:nth-child(even) {
                    background-color:#eee;
                }

                #myTable tr:nth-child(odd) {
                    background-color:#fff;
                }

                #table-link {
                    display:block;
                    text-decoration:none;
                    background-color:black;
                    color:white;
                    border-radius:5px;
                }

                #table-link a {
                    display:block;
                    text-decoration:none;
                    background-color:black;
                    color:white;
                    border-radius:5px;
                }

                #table-link a:hover {
                    display:block;
                    text-decoration:none;
                    background-color:#66991c;
                    color:white;
                    border-radius:5px;
                }

                .sticky {
                    position: fixed;
                    top: 0;
                    width: 100%;
                }
        /*...*/
        </style>    
    </head>
    <body>
        ...
        <table id="myTable">
        <div id="myHeader">
            <caption>...</caption>
            <thead>...</thead>
        </div>
        <tbody>...</tbody>
        </table>
        ...

        <script>
        window.onscroll = function() {myFunction()};

        var header = document.getElementById("myHeader");
        var sticky = header.offsetTop;

        function myFunction() {
          if (window.pageYOffset > sticky) {
            header.style.paddingTop = header.offsetHeight + 'px';
            header.classList.add("sticky");
          } else {
            header.style.paddingTop = 0;
            header.classList.remove("sticky");
          }
        }
        </script>
    </body>
</html>

26

4

0

文章推荐： php - 缺少 SSL 证书？

文章推荐： ios - 应用程序处理失败并显示消息 "This build is invalid."

文章推荐： swift - 如何使用 MDL 使用边界框进行 HitTest

css - IE7 输入定位错误(粘!)
查看此页面:http://jsbin.com/itufix使用 IE(页面自动启用 IE7 模式)。在这里您将找到如何使用显示 block 呈现内联元素(输入和跨度)的示例。所有元素的边距和填充都设
ios - 在自定义 UITableviewCell 中设置图像不会*粘*
我有一个自定义的 UITabvleViewCell，其中有一个 UIImageView。当在 cellForRowAtIndexPath 中设置单元格时，我可以很好地设置图像(尽管我没有)，但是在某些

首页

博学

6Ren·AI

商城

Javascript 表头不粘