我正在尝试使用
Javascript滚动事件来修复表头,以操纵表头的顶级属性.
根据浏览器和屏幕分辨率,这种技术似乎有很大差异(我的主要网站访问者是Retina MBP).目前它口吃不好.它可能在这个小提琴中工作得很好,但实际上在桌面上会很慢而且很笨拙.
https://jsfiddle.net/taylorpalmer/exp057a5/
我需要能够滚动页面,并在滚过它时让表头粘住.
var allTh = document.querySelectorAll("th"); var leftCells = document.querySelectorAll(".fixed-col"); var latestKNownScrollX = 0; var latestKNownScrollY = 0; var ticking = false; var onScroll = function() { latestKNownScrollX = document.body.scrollLeft; latestKNownScrollY = document.body.scrollTop; requestTick(); } function requestTick() { if (!ticking) { requestAnimationFrame(update); } ticking = true; } var immediate = true; var update = function() { console.log('scrolling'); ticking = false; var currentScrollY = latestKNownScrollY; var currentScrollX = latestKNownScrollX; var translateHead = (currentScrollY) +"px"; for(var i=0; i < allTh.length; i++ ) { allTh[i].style.top = translateHead; } var translateCell = currentScrollX + "px"; for(var i=0; i < leftCells.length; i++ ) { leftCells[i].style.left = translateCell; } }; window.addEventListener("scroll",onScroll);
我已经尝试过的事情:
>使用requestAnimationFrame() – 它当前已实现
> Debouncing scroll – 没有提高性能
>限制滚动 – 没有提高性能
>使用transform:translate()而不是top – 没有任何区别
我想过的事情,但不会奏效
>使用位置:固定或类似:标题单元格将失去其动态宽度并使表格毫无价值
解决方法
这样做怎么样?
https://jsfiddle.net/keikei/g3mt0rq6/
它的灵感来自this answer of the question
JS:
var tableOffset = $("#table-1").offset().top; var $header = $("#table-1 > thead").clone(); var $row = $("#table-1 > tbody > tr").first().clone(); var $fixedHeader = $("#header-fixed") .append($header) .append($("<tbody>").append($row)); $(window).bind("scroll",function() { var offset = $(this).scrollTop(); if (offset >= tableOffset && $fixedHeader.is(":hidden")) { $fixedHeader.show(); } else if (offset < tableOffset) { $fixedHeader.hide(); } });
HTML:
<body> <div id="wrap"> <table id="header-fixed"></table> <table id="table-1"> <thead> <tr> <th>Test</th> <th>Test</th> <th>Test</th> <th>Test</th> <th>Test</th> <th>Test</th> <th>Test</th> <th>Test</th> <th>Test</th> <th>Test</th> <th>Test</th> <th>Test</th> <th>Test</th> <th>Test</th> <th>Test</th> </tr> </thead> <tbody> <tr> <td class="fixed-col">Test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test<span style="position: relative">Relative</span></td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> <!-- and so on... ---> </tbody> </table> </div> </body> <script> </script>
CSS:
#header-fixed { position: fixed; top: 0px; display: none; z-index: 20; } #header-fixed > tbody { visibility: hidden; } #header-fixed > tbody > tr > td { height: 0; font-size: 0; border: none; } th { height: 100px; background: #999; color: white; position: relative; z-index: 10; } td { background-color: white; min-width: 100px; height: 100px; text-align: center; position: relative; z-index: 1; } .fixed-col { z-index: 5; } body,html { margin: 0; } thead { position: relative; z-index: 6; }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。