こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

スクロールに沿って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でスクロールに併せて要素を動かすにはどのようにすればよいでしょうか。

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

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

投稿日時 - 2015-03-25 19:17:49

QNo.8942810

すぐに回答ほしいです

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

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

投稿日時 - 2015-04-03 17:38:00

あなたにオススメの質問