Javascript 如何使用jQuery修复视差平滑滚动？

我想创造一个视差效果，但我有一个滚动的问题；它在跳。我想平滑地滚动。请帮忙

let READY={
onReady:function（）{
$（窗口）.scroll（READY.doscrolAction）；
},
doscrolAction:function（）{
让wScroll=$（this.scrollTop（）；
让scrollingBackground=（50+（wScroll/10））；
如果（滚动背景<101）{
$（'header'）.css({
“背景”：“线性渐变（向右，#0DA7E9'+滚动背景+'%，#f1f6f6 50%）”
});
$（'header'）.css({
'位置'：'固定'，
“最小高度”：“100vh”，
“宽度”：“100%”，
“z索引”：“9999”
});
}否则{
$（'header'）.css({
“位置”：“静态”，
“z索引”：“0”
})
}
}
};
$（文档）.ready（ready.onReady）
html，
身体{
填充：0；
保证金：0；
}
标题{
最小高度：100vh；
背景：线性梯度（向右，#0DA7E9 50%，#f1f6f6 50%）；
}
.关于我{
最小高度：100vh；
背景色：红色；
填充顶部：500px；
填充底部：500px；
}
h1{
文本对齐：居中；
}

内容
只需像这样编辑css：


let READY={
onReady:function（）{
//卷轴
$（窗口）.scroll（READY.doscrolAction）；
},
DoscrolAction:函数（）{
让wScroll=$（this.scrollTop（）；
让scrollingBackground=（50+（wScroll/100））；
如果（滚动背景<101）{
$（'header'）.css({
“背景”：“线性渐变（向右，#0DA7E9'+滚动背景+'%，#f1f6f6 50%）”
});
$（'header'）.css({
'位置'：'固定'，
“最小高度”：“100vh”，
“宽度”：“100%”，
“z索引”：“9999”
});
}否则{
$（'header'）.css({
“位置”：“静态”，
“z索引”：“0”
})
}
}
};
$（文档）.ready（ready.onReady）
html，
身体{
填充：0；
保证金：0；
}
标题{
最小高度：1000vh；
背景：线性梯度（向右，#0DA7E9 50%，#f1f6f6 50%）；
}
.关于我{
最小高度：1000vh；
背景色：红色；
填充顶部：500px；
填充底部：500px；
}
h1{
文本对齐：居中；
}
html{
滚动行为：平滑；
}

内容
no，我想在蓝色背景满的时候，不要跳转到部分，这样部分看起来很平滑看看JSFIDLE