jQuery 스크롤하는 동안 배경 이미지 변경

Question

스크롤하는 동안 배경 이미지를 변경하려고 애 쓰고 있습니다. 나는 유사한 질문에 게시 된 솔루션을 시도했지만 지금까지 아무런 운이 없다. 첫 번째 배경 이미지 만 표시 할 것이다.

기본적으로 배경은 고정 위치와 여러 div로 설정되어 있습니다. 각 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 + ")"); 
}