スクロールの背景位置を変更しますか？

Question

このコードでは、背景の位置を変更すると、本体のスクロールが開始されます。私は、スクロールはあなたが好き計算から、この同じ値を削除する必要があり、その後、背景の変化がif (viewport.scrollTop() > fixed_value)を開始する時期条件を追加する必要があります

$(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: relative; 
 
    top: 580px; 
 
    right: 0; 
 
    z-index: -1; 
 
    background: transparent url(https://www.3sessanta.it/images/polaroid/sprite_polaroid_total.jpg) no-repeat 0 0;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="rotator"></div>

Answer 1

背景画像の上にあるときに、背景の位置を変更したいですこの：

$(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) { 
 

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

body { 
 
    height: 2000px; 
 
} 
 

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="rotator"></div>