javascript - 增加 IE 中的 jquery 滚动频率

Question

我有一个表头，它在滚动 100 像素后必须保持在顶部(表格上方有一个边距)。我所做的是将其位置设置为 absolute 并使用 $(document).scrollTop() 计算适当的 top 值，然后更新其位置使用 $(document).scroll(function () {...}。在 Firefox 和 Chrome 中一切顺利，但在 IE 中则不然。在 IE 中，标题的滚动在全部。

我做了一个测试，打印了 (document).scrollTop() 的值并注意到，虽然 Firefox 和 Chrome 每隔几个像素触发一次滚动事件，但 IE 每次滚轮移动都会触发一次，无论我滚动了 5 像素还是 500 像素。

有没有办法提高IE中滚动事件的更新频率？

我已经尝试过的:

• 将标题位置设置为 fixed 而不是 absolute 有帮助，但表格非常大，然后问题将转移到水平滚动。
• 使用具有较长延迟的 CSS 动画看起来很奇怪并且有点烦人；短暂的延迟没有帮助，问题仍然存在。
• 使用 setInterval 每 100 毫秒更新一次标题位置。这在浏览器上太重了，甚至不起作用。结果在 IE 中保持不变，因为滚动值在移动结束前保持不变。

注意:我只针对 IE11。

编辑:http://jsfiddle.net/5fv5q5fy/2/我刚刚编译了这个 fiddle 供您尝试。我很感激任何帮助，但请记住，我无法在不破坏我网站其余部分的情况下更改所有内容，该网站的交互元素已经非常多。

Answer 1

我认为您无法改变 Internet Explorer 的工作方式。事实上，它在 IE 中的表现非常糟糕。你应该做的是使用这个简单的解决方法，使用 fixed 定位:

jsFiddle demo

if (scrollTop > 20) {
    // Stays fixed on top
    $("thead").css({
        position: 'fixed',
        top: 0
    }).closest('table').addClass('scrolling');

} else {
    // Moves with scroll
    $("thead").css({
        position: 'static',
        top: 'auto'
    }).closest('table').removeClass('scrolling');
}

然后你可以删除这个css:

thead {
    position: absolute;
    top: 10px;
}

然后添加这个:

table.scrolling {
    margin-top: 50px;
}

编辑:

对于更复杂的集成，您可能想看看这个现成的插件，它经过测试并且可以在 Internet Explorer 上正常工作:
<强> StickyTableHeaders