I recently was playing around with the idea of having an image appear when the user scrolls and came up with the following. Is there a better or more efficient way to do it?
var pastScroll;
jQuery(document).scroll(function () {
var currentScroll = jQuery(document).scrollTop();
if (pastScroll == currentScroll) {
//console.log("not moving");
jQuery('#content').css('background-image', 'url("/onScroll/blank.png")');
// clear background
}
else {
jQuery('#content').css('background-image', 'url("/onScroll/logo.png")');
jQuery('#content').css('background-repeat','no-repeat');
jQuery('#content').css('background-position', 'center');
//console.log('moving');
pastScroll = currentScroll;
setTimeout(function () {
if (pastScroll == currentScroll) {
//console.log("not moving");
jQuery('#content').css('background-image', 'url("/onScroll/blank.png")');
}
}, 100)
}
});
You can ignore the use of jQuery instead of $ because it's being used in wordpress and ignore the css style added. I'm just wanting to focus on the conditionals and triggering. Any constructive criticism is appreciated, thanks.