jquery之在 safari 和 FireFox 中向上滚动时动画断断续续

我正在构建一个网站，我在其中放置了一个滚动动画，其中图标图像根据右侧容器内容的偏移位置向上移动。逻辑很好，但动画在 safari 和 Firefox 中不稳定。

网址 - http://ashirvad.xyz/qbf/

代码逻辑是这样的:

$(window).scroll(function() {     
    var height = $(window).height(), 
        scroll = $(window).scrollTop() 
        var offsetStart = $('#cardContent').offset();       
    if (initialOffSetStartPosition.top >= (offsetStart.top -scroll - 1) ) { 
        $(".nav-sticky").offset({top:offsetStart.top});      
} 
}); 

有什么帮助吗？

请您参考如下方法:

尝试使用变换而不是定位。 https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/

它具有更好的性能，并且可以为您提供更流畅的结果。此外，如果您使用的是视网膜显示屏或其他高密度显示屏，它也会影响性能。

更新:是的，我刚刚在 Safari 和 Firefox 中的 5K 显示器上尝试过，性能很差。但是，当我将其转移到标准显示器时，性能很好。不过，我仍然建议对定位元素使用 transform 来提高动画质量。