Question

我尝试使用Javascript scroll事件来修复表标题，以操纵表标题的top属性。

根据浏览器和屏幕分辨率，这项技术似乎有很大差异（我的主要网站访问者是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 - 没有什么区别

我已经考虑过的事情，但没有成功

使用position: fixed或类似内容：标题单元格将失去动态宽度并使表格毫无价值

Answer 1

这样做怎么样？

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;
}

Answer 2

最终解决方案：Javascript滚动无法与position: fixed竞争性能。我最终使用position: fixed，然后根据需要操纵top和left属性来完成我的表格。

Javascript性能：固定表格标题和滚动列

2 个答案: