在safari和FireFox中向上滚动时的乱七八糟的动画

Question

我正在建立一个网站,我在其中放置了一个滚动动画,其中图标图像根据右侧容器内容的偏移位置向上移动.逻辑很有效,但动画片和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});     
}
});

有帮助吗？

Answer 1

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

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

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