Once the user has scrolled 600px down the page, I want a CSS background image to transition from no image to a specific background image (image 1). However, if they scroll above 600px, I want it to switch to another image (image 2). It should be able to continuously repeat this without requiring a page refresh as well.
Below is the code I am using:
jQuery:
$(window).scroll(function() {
var y_scroll_pos = window.pageYOffset;
var scroll_pos_test = 800;
// set to whatever you want it to be
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 feel like I might be overlooking something simple here, but I just can't seem to pinpoint it. Any suggestions or thoughts would be greatly appreciated. Thank you!