スクロールに沿って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でスクロールに併せて要素を動かすにはどのようにすればよいでしょうか。
わかりにく説明と、ひどく初心者の質問で大変に恐縮ですが、どなたかご教授いただけませんでしょうか。
よろしくお願いいたします。
