scrollTop help、600pxを1回だけ渡した後に画像を表示

Question

ユーザーが600pxをスクロールしたときに赤いブロックを表示し、600pxを超えてスクロールすると青色のボックスを表示するとします。それはいいです;ただし、600pxを1回スクロールした後に、赤色のボックスが1回だけ表示された後は、青色のボックスを表示したいだけです。明白なことは、 "scrollTop"が600pxより大きい場合は赤いブロックを表示し、 "scrollTop"が（<）600pxより小さい場合は青いブロックを表示することです。ただし、技術的にscrollTop < 600pxには600未満のすべてのピクセルが含まれているため、「scrollTop」が1pxに達するとすぐに青色のブロックが表示されます。

したがって、青いブロックを表示する必要があります1回/ 600ピクセルが1回通過しました。

のjQuery：事前に

$(document).scroll(function() { 
    var y = $(this).scrollTop(); 
    if (y > 600) { 
    $("#square").css("background-image", "url(images/comp_rel/red_block.gif)"); 
    } 
    else { 
    $("#square").css("background-image", "url(images/comp_rel/blue_block.gif)"); 
    } 
}); 

、任意の助けに感謝します。

Answer 1

この使用：

var shw = false; 
$(document).scroll(function() { 
    var y = $(this).scrollTop(); 
    if (y > 600) { 
     shw=true;  
     $("#square").css("background-image", "url(images/comp_rel/red_block.gif)"); 

    } 
    else { 
    if(shw) 
     $("#square").css("background-image", "url(images/comp_rel/blue_block.gif)"); 
    } 
});