Javascript 图像视差滚动不平滑

我试图创建一个非常简单的视差滚动效果，只是jQuery、CSS和一个图像，但问题是它不是非常平滑和不稳定

我的目标是当用户向下滚动页面时，让图像从页面的右上角移动到左下角

我需要一些帮助，以实现更完美的页面，但要么修复我现有的js，要么如果你知道如何实现视差插件，那就更好了

如果有必要，我可以发送所有需要的文件

这是我目前的代码：

Javascript:

$(document).scroll(function () { 
var ratio = window.pageYOffset / ( $(document).height() - $(window).height()) ;
console.log( "scroll: " + window.pageYOffset + ", ratio: " + ratio );

$( '#slash-1' ).css( 'top', -160 + ( 4500 * ratio ) + 'px' );
$( '#slash-1' ).css( 'left', 960 - ( 960 * ( ratio ) ) + 'px' );

$( '#slash-2' ).css( 'top', -300 + ( 4500 * ratio ) + 'px' );
$( '#slash-2' ).css( 'left', 960 - ( 960 * ( ratio ) ) + 'px' );
});

HTML

---

我找到了一个解决方案，通过使用这个javascript解决了这个问题

$(window).scroll(function() {
var distance = $(this).scrollTop();
$('#slash-1').css({
    'top': (distance*2) + 'px',
    'right': '+' + distance + 'px'
});
});

---

你测试过哪些浏览器？哪里有演示，我们可以看到？

#slash-1 { position: absolute; top: 300px; left: 960px; }

$(window).scroll(function() {
var distance = $(this).scrollTop();
$('#slash-1').css({
    'top': (distance*2) + 'px',
    'right': '+' + distance + 'px'
});
});