jQuery Изменение фоновых изображений при прокрутке

Question

Я изо всех сил пытаюсь изменить свое фоновое изображение во время прокрутки. Я пробовал решения, размещенные на похожие вопросы, но пока не повезло, он отобразит только первое фоновое изображение.

В основном у меня есть фон, установленный в фиксированное положение, и несколько div, каждый из которых имеет размер окна просмотра и каждый с верхним краем размером с высоту видового экрана. Другими словами, при прокрутке пользователь видит фоновое изображение только после прокрутки каждого div. Я хочу, чтобы фоновое изображение изменилось после прокрутки каждого div.

Вот код:

$(window).scroll(function() { 
    var windowY = $(window).height(); 
    var scrolledY = $(window).scrollTop(); 
    var image_url = '/images/image1.jpg'; 

    if (scrolledY > windowY) { 
     image_url = '/images/image2.jpg'; 
     } 

    $('body').css('background', "url(" + img_url + ")"); 

}); 

Заранее спасибо!

Answer 1

У вас было два опечатка, круглые скобки, а затем ваше имя переменной image_url. Изначально вы были:

$(body).css('background', "url(" + img_url) + "'"; 

Изменить на:

$(body).css('background', "url(" + image_url + ")"); 

Скобки были неправильными, и в конечном счете, так был окончательный, сцепленных строка. Кроме того, ваша переменная была объявлена ​​как image_url, но в вашей функции css вы использовали img_url.

Answer 2

Изменить вызов фоновой собственности

$(window).scroll(function() { 
    var windowY = $(window).height(); 
    var scrolledY = $(window).scrollTop(); 
    var image_url = '/images/image1.jpg'; 

    if (scrolledY > windowY) { 
    image_url = '/images/image2.jpg'; 
    backgroundChange(image_url); 
    } 
}); 


function backgroundChange(img_url){ 
    $("body").css("background", "url(" + img_url + ")"); 
}