logo标签列表

JavaScript表头不粘性

javascripthtml
3
我尝试根据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>
1
您当前的代码在这里似乎运行良好：http://jsfiddle.net/AndrewL64/f0d42bet/24/ - AndrewL64
请把你的所有CSS都发布出来。我认为你没有从示例样式表中复制所有必需的样式。你需要复制更多的内容，而不仅仅是从示例中的.sticky。 - AndrewL64
2
  1. 不要使用w3schools。
  2. 你的HTML无效，<table>不能直接包含一个div。对我来说，Firefox会将<div>移动到表格外面，但是会将<caption>留在里面，这意味着你看不到代码是否按照预期工作。
  3. 还有这个：position: sticky。
 - user5734311
仍然不起作用，我尝试将位置设置为sticky，并删除了表格内所有的javascript元素和<div>... - cqcum6er
现在已经解决了，但是有没有办法将<caption>包含在粘性元素内？还是必须使用JavaScript来解决？ - cqcum6er
NVM，我已经将position:sticky添加到标题中了，现在一切都正常了。 - cqcum6er
1个回答
5

不使用Javascript来实现 position:sticky。

.sticky {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}
在使用这个之前，请务必检查浏览器的支持情况，尽管它很好用。https://caniuse.com/#search=Sticky - Nate
对我来说不起作用（适用于Chrome，Firefox和IE）。在thead th下放置位置修饰符也不起作用 :( - cqcum6er
你应该将 div 标签从 table 标签中取出。粘性元素只会在其父容器的底部边缘不接触粘性元素的底部边缘时才会保持粘性，否则它将随着滚动而滚动。 - Jeaf Gilbert
没事了，我把 HTML 注释放到了 CSS 注释的位置，现在一切都正常了。 - cqcum6er
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接