スクロールに沿ってjavascriptで背景画像を

質問

現在webサイトを作成しています。ページのメインビジュアルを「.mainVisual」というclassを作成し背景画像を指定して表示しています。
この背景画像を画面スクロールした際に、下に動くように以下のjavascriptを実装しています。

$(function() {
$(window).scroll(function(){
var y = $(this).scrollTop();
$('.mainVisual').css('background-position-y', '0 ' + parseInt( +y / 10 ) + 'px');
});
});

この状態で動くのですが、今回新たに背景画像の元々の表示位置を「background-position」で調整したいと考えています。（単純に画像が下に下がるので、事前に画像の位置を上に上げておきたい）

cssの記載で位置の調整はできるのですが、スクロールしてjavascriptが実装されると「background-position」の値が0pxになってしまい、背景画像の指定位置が元に戻ってしまいます。

こちら既に指定指定した「background-position」の値を残しつつ、jsでスクロールに併せて要素を動かすにはどのようにすればよいでしょうか。

わかりにく説明と、ひどく初心者の質問で大変に恐縮ですが、どなたかご教授いただけませんでしょうか。

よろしくお願いいたします。

回答No.1

Hanagefactory

単純に別のdiv用意して、そこにposition: fixed;とかでwidth:100%;height:100%;にしちゃうのはだめなんですかね？
書いてある内容だと、これで実現できそうですが・・・。