javascript - 使用 jQuery 更新滚动条上的多个背景位置？

Question

视差脚本不会更新 $(window).scroll 上的 css。好像不能用 jQuery 添加多个背景位置？

视差滚动脚本:

<script>
var top_header = '';
$(document).ready(function(){
  top_header = $('header');
});
$(window).scroll(function () {
  var st = $(window).scrollTop();
  top_header.css({'background-position':"left "+(st*.5)+"px,"});
});
</script>

CSS:

header {background-image: url(../images/1.png), url(../images/2.png);
        background-repeat: no-repeat, no-repeat;
        background-position: left, right; 
        height: 550px; width: 100%}

我试过像这样更新 css:

$(window).scroll(function () {
  var st = $(window).scrollTop();
  top_header.css({'background-position':"left "+(st*.5)+"px,"+","+"right "+(st*.5)+"px,"});
});

这会中断代码，并且页眉的背景位置不会按应有的方式在滚动时更新。

任何想法表示赞赏。

Working example
Not working example

Answer 1

在 css 中你设置了 multiple background像这样的位置:

 background-position: bottom right, left, right;

这意味着你的代码应该看起来像这样

$(window).scroll(function () {
  var st = $(window).scrollTop();
  top_header.css({'background-position':"left "+(st*.5)+"px," + "right "+(st*.5)+"px;"});
});