javascript - jQuery change css background when y-axis scroll reaches a certain depth -

after scrolling down 600px, css background-image appear no image decided background-image (image 1); however, above 600px, change image (image 2). want action repeat without having refresh page, well.

here code:

jquery:

$(window).scroll(function() {     var y_scroll_pos = window.pageyoffset;     var scroll_pos_test = 800;                  // set whatever want      if(y_scroll_pos > scroll_pos_test) {        $("square").css("background-image", "url(images/comp_rel/square.png)");     }     else     {         $("square").css("background-image","url(images/comp_rel/box.gif)");     } }); 

i know i'm missing simple, can't figure out. thoughts? thanks.

it's working me:

$( window ).scroll(function() {      var y_scroll_pos = document.documentelement.scrolltop;     var scroll_pos_test = 800;                  // set whatever want     if(y_scroll_pos > scroll_pos_test) {        $("#square").css("background-color", "#00ff00");     }     else     {         $("#square").css("background-color", "#0000ff");    } }) 

only replace css property background-color background-image