Javascript jQuery:在滚动时修复表行-性能问题

我有一张不同类别的桌子。每个类别都有一个标题，我希望在滚动时确定该标题在表格顶部的位置

简单的例子：如果我看到桌子上有车，我希望

thead

显示“cars”。如果我继续滚动并开始看到摩托车，我希望它显示“摩托车”

下面是一个代码片段，其中包含我的代码的简化版本，以表示上述示例：

//开始滚动
$（'tbody'）。滚动（函数（）{
doStuff（）；
});
函数doStuff（）{
$（'.title'）。每个（函数（）{
//设置变量
var$this=$（this）；
var childPos=$this.position（）；
var parentPos=$（'tbody'）.position（）；
var currentTop=childPos.top-parentPos.top；
//听众
如果（currentTop如果您不想设置延迟
.scroll（）
调用的超时，您的选项仅限于优化
.scroll（）
事件，使其尽可能快

我在这里编写了另一种方法，但还没有在大型表上进行测试：

您会注意到，我将所有昂贵的计算移到循环之外，并在初始加载时处理它们。这允许我只需执行
.scroll（）
事件，并只处理一次昂贵的计算

//initialize headers
var headers = [];
$('.title').each(function(index) {
  var header = {
    thead: $(this),
    top: $(this).parent().index() * $(this).outerHeight(),
    bottom: 0
  };
  headers.push(header);
});

//calculate header container heights
for (var i = 0; i < headers.length; ++i) {
    headers[i].bottom = (i+1 < headers.length) ? headers[i+1].top : 100000;
}

从视觉上看，它看起来像这样：

-------------------  top: 0
|  th   |   Cars   |
|  td   |    1     |
-------------------  top/bottom: 40
|  th   |  Motors  |
|  td   |    2     |
|  td   |    3     |
-------------------  top/bottom: 100
|  th   |  Planes  |
|  td   |    4     |
-------------------  bottom: 140

代码的最后一部分是
滚动
循环本身。由于我在上面做了额外的工作，我们不必循环每个滚动上的所有
.title
对象。此解决方案将开销减少为两个数字比较，这应该相对便宜

var headerIndex = 0;
function doStuff() {
    var scroll = $('tbody').scrollTop();
    if (scroll >= headers[headerIndex].top && scroll < headers[headerIndex].bottom) {
        return true;
    }
    else {
        //get new headerindex and update header
        headers[headerIndex].thead.removeClass('active');
        headerIndex = (scroll < headers[headerIndex].top) ? headerIndex-1 : headerIndex+1;
        headers[headerIndex].thead.addClass('active');

        $('thead').find('.active').remove();
        $('.active').last().clone().appendTo($('thead'));
    }
}

var headerIndex=0；
函数doStuff（）{
var scroll=$（'tbody'）.scrollTop（）；
如果（滚动>=标题[headerIndex]。顶部和滚动<标题[headerIndex]。底部）{
返回true；
}
否则{
//获取新的headerindex并更新header
headers[headerIndex].thead.removeClass（'active'）；
headerIndex=（滚动<标题[headerIndex].top）？headerIndex-1:headerIndex+1；
headers[headerIndex].thead.addClass（'active'）；
$（'thead'）.find（'.active'）.remove（）；
$（'.active'）.last（）.clone（）.appendTo（$（'thead'））；
}
}

它的代码比您拥有的代码多得多，而且有一定的改进空间，但我会尝试类似的方法，看看您是否看到任何明显的性能提高。
哇，这是一个多么大的改进啊。我仍在尝试完全理解您的代码，但我看到繁重的处理是不可能的，我理解如何进行。非常感谢但是，在我的原始代码中，“headers[headerIndex].top”从50（页眉高度）开始，算法停止工作。我正在试图理解为什么值是50…干杯。你能解释一下“top”变量吗？我不明白
$（this.parent（）.index（）*$（this.outerHeight（））的用途
。为了更好地解释问题，我更新了解决方案。希望它能帮助您理解我要实现的目标，但在数学部分可能有一些改进！
-------------------  top: 0
|  th   |   Cars   |
|  td   |    1     |
-------------------  top/bottom: 40
|  th   |  Motors  |
|  td   |    2     |
|  td   |    3     |
-------------------  top/bottom: 100
|  th   |  Planes  |
|  td   |    4     |
-------------------  bottom: 140

var headerIndex = 0;
function doStuff() {
    var scroll = $('tbody').scrollTop();
    if (scroll >= headers[headerIndex].top && scroll < headers[headerIndex].bottom) {
        return true;
    }
    else {
        //get new headerindex and update header
        headers[headerIndex].thead.removeClass('active');
        headerIndex = (scroll < headers[headerIndex].top) ? headerIndex-1 : headerIndex+1;
        headers[headerIndex].thead.addClass('active');

        $('thead').find('.active').remove();
        $('.active').last().clone().appendTo($('thead'));
    }
}