jQuery - 視差效果 - 將背景位置更改為“居中”

Question

我已經在我的網站中實現了以下 jQuery 視差效果（取自http://www.brandaiddesignco.com/insights/parallax-scrolling-made-easy/ ）：

var top_header = '';
$(document).ready(function(){
  top_header = $('.header-container');
});
$(window).scroll(function () {
  var st = $(window).scrollTop();
  top_header.css({'background-position':"center "+(st*.5)+"px"});
});

它工作得很好，我需要做的只是將它應用到包含背景的類。 但是，背景圖像的起始位置是頂部中心，我想將其更改為中心中心。 我嘗試將代碼更改為以下內容，這使插件停止工作：

top_header.css({'background-position':"center center"+(st*.5)+"px"});

有什么建議？

謝謝！

Answer 1

想通了……讓它與 CSS calc() 一起工作：

$(document).ready(function(){

var top_header = $('.header-container');
top_header.css({'background-position':'center center'}); // better use CSS

$(window).scroll(function () {
var st = $(this).scrollTop();
top_header.css({'background-position':'center calc(50% + '+(st*.5)+'px)'});
});
});

http://codepen.io/anon/pen/qEgQzK?editors=001

原始答案已編輯。