页面重新加载时视差滚动背景图像位置错误（不在页面顶部时）

Question

我正在开发一个具有三个基于图像的视差滚动层的缩放网页。只有前两层是用视差 javascript 设置的。第三层设置为正常滚动速度0，因此不需要任何滚动速度修改。

我的问题是，当您不在页面顶部时（至少在 Firefox 上）重新加载页面时，这两层加载到错误的位置，但一旦您开始滚动，就会自行纠正。

我认为问题与位置属性有关。更改为“相对”具有相同的效果，更改为“固定”具有相似的效果（除了在重新加载时，图层的行为就像视口的顶部是页面的顶部），并且没有位置属性会导致它们不分层且没有视差滚动效果。

这是我用于视差效果的 javascript：

$(window).scroll(function(e){
  parallax();
});
function parallax(){
  var scrolled = $(window).scrollTop();
  $('.bg').css('top',-(scrolled*-0.7)+'px');

  $('.stairs').css('top',-(scrolled*-0.5)+'px');

}

这是我的页面的简化版本，在 jfiddle 上带有占位符图形：http://jsfiddle.net/4spur9ch/

您可以通过稍微向下滚动来了解我的意思，然后在结果框内右键单击，然后转到 This Frame > Reload Frame

这是我继续之前需要解决的最后一个问题。任何帮助将不胜感激。

编辑：它可能与 javascript 中的 'top' 有关，但删除它会导致问题。

Answer 1

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

/*Needed to add this line:*/
$(window).trigger("scroll")

function parallax(){
  var scrolled = $(window).scrollTop();
  $('.bg').css('top',-(scrolled*-0.7)+'px');

  $('.stairs').css('top',-(scrolled*0.3)+'px');
}