Javascript 更新无响应页面上滚动事件上固定元素的位置

我有一个运行大量javascript的大页面，其中还包含一个固定位置的浮动元素。浮动元素根据用户当前的滚动位置，通过在滚动事件中触发的函数更新其位置

我遇到的问题是，由于页面的大小和复杂性，在执行scroll事件中的代码之前会有一个延迟，这会导致快速滚动或使用鼠标滚轮时固定元素明显跳转

参见JSFIDLE：（setTimeout的使用模拟了在实际页面上执行函数的延迟。）

---

对于如何解决这个问题，我有点不知所措。我尝试过更新边距而不是顶部位置，以及在绝对位置和固定位置之间切换。也许有一种方法可以使用css转换来提供帮助，但是我还没有设法让它们在这里工作。

您可以将

位置：sticky

添加到css中，以确保粘性是由支持它的浏览器完成的（根据caniuse.com，只有Firefox和Safari）

您总是被限制在滚动事件的保真度范围内，因此您可能总是会看到一些延迟，但是您可以通过缓存值而不是在每次调用updateFloat（）时查找值来稍微改进。比如说

var mainElement = $('.main');
var windowElement = $(window);
var floatElement = $('.float');

var updateFloat = function() {
    var mainTop = mainElement.offset().top;
    var scrollPos = windowElement.scrollTop();
    var floatOffset = 25;
    var newTop = (scrollPos > mainTop) 
        ? floatOffset + 'px' 
        : mainTop + floatOffset - scrollPos + 'px';

    floatElement.css('top', newTop);
} 

问题还可能与浏览器试图重新布局页面有关，因为.float元素与其他div位于同一渲染层中。您可以通过添加一个样式来修复此问题，该样式告诉浏览器将.float元素放置在其自己的渲染层中（由于GPU合成，因此渲染速度更快）。最常见的技巧是添加

transform:translateZ（0）到您的样式，但也有一个建议的样式，由几个浏览器支持。所以你应该像这样更新你的css

.float {
    will-change: scroll-position;
    transform: translateZ(0);
    position: fixed;
    width: 100px;
    height: 50px;
    top: 233px;
    right: 25px;
    background-color: red;
    z-index: 2;
}

请注意，添加渲染层会增加内存使用量，因此不要过火。它有时也会影响其他功能，如文本的抗锯齿。
在您的live页面上，您是否调用
updateFloat（）
，但没有这样的超时？：
$（窗口）。滚动（updateFloat）是的，setTimout仅用于JSFIDLE演示来模拟实时页面延迟。您发布的代码是在滚动时运行的唯一代码吗？还有一些其他代码在滚动时运行-不幸的是，我无法修改或删除它。我想这就是造成延误的原因。
.float {
    will-change: scroll-position;
    transform: translateZ(0);
    position: fixed;
    width: 100px;
    height: 50px;
    top: 233px;
    right: 25px;
    background-color: red;
    z-index: 2;
}