Q: Changing position background in JavaScript, strange issue I have a simple question, I would like to change one picture when a user scroll the page (to make an illusion of 3d picture) 
the first approach was changing the image src every time (making like 8 different pictures) but I could see the lag on the browser when I was scrolling, the effect was not good.
So that, I had the idea to make one single image, anche change the background-position while the user scroll.
This works perfect (when everything is loaded), the only problem is when the user scroll, each time the background-position is changing, the browser reload the picture. So that, the waiting will be to much. Looks like load different picture, but it's only one.
I don't understand why, the picture is always the same, why there is this problem? did someone know another solution?
this is the script:
    <script type="text/javascript">
 jQuery('.qty-cart-btn2').hide();
 jQuery('.shoes-360-2').css('backgroundImage','url(shoes_img1/360.png)');

  require(['jquery', 'jquery/ui'], function($){ 


 jQuery(function(){
    jQuery(window).scroll(function(){

        if(jQuery(this).scrollTop() >= 30) {
            jQuery('#back-shoes')
                .css({'background-position-y':'-264px'})

        }

        if(jQuery(this).scrollTop() >= 45) {
            jQuery('#back-shoes')
                .css({'background-position-y':'-528px'})

        }

        if(jQuery(this).scrollTop() >= 60) {
            jQuery('#back-shoes')
                .css({'background-position-y':'-792px'})
        }
                if(jQuery(this).scrollTop() >= 75) {
            jQuery('#back-shoes')
                .css({'background-position-y':'-1056px'})
        }
               if(jQuery(this).scrollTop() >= 90) {
            jQuery('#back-shoes')
                .css({'background-position-y':'-1320px'})
        }

               if(jQuery(this).scrollTop() >= 105) {
            jQuery('#back-shoes')
                .css({'background-position-y':'-1584px'});
        }

              if(jQuery(this).scrollTop() >= 120) {
            jQuery('#back-shoes')
                .css({'background-position-y':'-1848px'});
        }



    });
});
 });
</script>

Thank you very much

A: Use IF condition in greather than and smaller than, like:
jQuery(function(){
jQuery(window).scroll(function(){
    var Scroll = jQuery(this).scrollTop();
    if(Scroll >= 30 && Scroll < 45){
        jQuery('#back-shoes').css({'background-position-y':'-264px'})

    }
});

});

A: I solved by this example:
<div id="rotator"></div>

$(function() {

    var rotator = $('#rotator');
    var container = $(document);
    var viewport = $(window);

    var images = 72;
    var imageHeight = 30000 / images;
    var scrollHeight = container.height() - viewport.height() + imageHeight;
    var step = images / scrollHeight;

    viewport.scroll(function(event) {

        var x = -Math.floor(step * viewport.scrollTop()) * imageHeight;
        rotator.css('background-position', x + 'px 0');

    });

body {
    height: 2000px;
}

#rotator {
    font-size: 416px;
    width: 1em;
    height: 1em;
    position: fixed;
    top: 0;
    right: 0;
    z-index: -1;
    background: transparent url(http://www.3sessanta.it/images/polaroid/sprite_polaroid_total.jpg) no-repeat 0 0;
}

http://jsfiddle.net/coma/sBTzG/13/
Thanks everyone
