Javascript 视差滚动效果，从页面上的某个百分比开始？

我正在使用此脚本在我的页面上创建视差滚动效果：

$(window).scroll(function (e) {
    parallax();
});

function parallax() {
    var scrolled = $(window).scrollTop();
    $('.cloud1').css('top', - (scrolled * 0.1) + '%');
    $('.cloud2').css('top', - (scrolled * 0.3) + '%');
    $('.cloud3').css('top', - (scrolled * 0.2) + '%');
}

HTML:

<div class="cloud1"></div>
<div class="cloud2"></div>
<div class="cloud3"></div>

当脚本开始（滚动）时，HTML更改为：

<div class="cloud1" style="top: 0%; "></div>

这使得“云”跳到页面顶部，然后视差开始（你可以在很短的时间内看到，因为它已经跳到页面顶部）

有没有办法将视差开始时的

style=“top:0%；”

设置为从20%开始，然后开始乘以0.1

下面是问题的代码笔：

希望这是清楚的

谢谢你的帮助

---

乔恩

好的，我想我已经解决了这个问题

$(window).scroll(function(e){
 parallax();
});
function parallax(){
  var scrolled = $(window).scrollTop();

    $('.cloud1').css('top', -(scrolled*0.1)+70+'%'); 
// the 70 corresponds to the 'cloud1' value for 'top'.

    $('.cloud2').css('top', -(scrolled*0.3)+50+'%');
// the 50 corresponds to the 'cloud2' value for 'top'.
}

修正了跳跃。

---

希望这有帮助。

这似乎解决了我的问题，如果他们的方法是编写类似

$（'.cloud1'）.css（'top'=50%，-（滚动的*0.1）+'%'）或脚本中的某些内容-唉，这是一个非常好的解决方案，感谢您的帮助！我最初的想法是，adding=将不起作用，因此我对其进行了修改，以便每个云都将其“top”值添加到jQuery中。它即使不跳也能工作！
$(window).scroll(function(e){
 parallax();
});
function parallax(){
  var scrolled = $(window).scrollTop();

    $('.cloud1').css('top', -(scrolled*0.1)+70+'%'); 
// the 70 corresponds to the 'cloud1' value for 'top'.

    $('.cloud2').css('top', -(scrolled*0.3)+50+'%');
// the 50 corresponds to the 'cloud2' value for 'top'.
}

#hero {
background:black; 
    color: white;
}

.cloud1, .cloud2 {
    opacity: 0.8;
position: fixed;
width: 100%;
height: 100%;
    z-index: 1;
}

.cloud1 {
    background: url('http://www.jrk-design.co.uk/v2/images/big-cloud.png') no-repeat;
top: 70%;
left: 0;
}

.cloud2 {
background: url('http://www.jrk-design.co.uk/v2/images/big-cloud.png') no-repeat;
top: 50%;
left: 65%;
}