スクロールピクセルの代わりにスクロールパーセンテージで画像を変更してください

Question

私はページをさらにスクロールすると画像を3回動的に変更するいくつかのJqueryコードについて助けになりました。下のコードはそのまま動作しますが、異なるスクリーンには異なる解像度があるため、ピクセルに頼るのは良いことではないことがわかっています。

遷移がすべての上に正確に同じに機能するように、したがって、私は...もっとのようなものに...

(pos > 2900 && pos < 3900)

を変更する

(scrollPercent > 25% && scrollPercent < 35%)

が欲しいです画面。

window.onload = function(){ 
$("#package1").fadeIn(500); 
$(document).scroll(function() { 
    var pos = $(document).scrollTop(); 
    if (pos < 2900) { 
    hideAll("package1"); 
    $("#package1").fadeIn(500); 
    } 
    if (pos > 2900 && pos < 3900) { 
    hideAll("package2"); 
    $("#package2").fadeIn(500); 
    } 
    if (pos > 3900 && pos < 5000) { 
    hideAll("package3"); 
    $("#package3").fadeIn(500); 
    } 
}); 

function hideAll(exceptMe) { 
    $(".package").each(function(i) { 
    if ($(this).attr("id") == exceptMe) return; 
    $(this).fadeOut(1000); 
    }); 
}} 

アイデアをお持ちの方は？参考のため

、私の作業中のページ：http://www.johnmorganstudios.se/client-sevn/

Answer 1

私はこの瞬間、あなたのためにお勧めできるもののようになります。

var h =document.body.clientHeight; 
var i=h/2; 
window.scrollBy(0, i); 

注：/2は50%と/5手段20%などを意味し、 。

var h=document.body.clientHeight; 
var i=h/4, o=h/2.85; // 25% as you said. and o which is gonna be 35% 

window.onload = function(){ 
$("#package1").fadeIn(500); 
$(document).scroll(function() { 
    var pos = $(document).scrollTop(); 
    if (pos < i) { 
    hideAll("package1"); 
    $("#package1").fadeIn(500); 
} 
    if (pos > i && pos < o) { 
    hideAll("package2"); 
    $("#package2").fadeIn(500); 
    } 
    if (pos > o && pos < 5000) { 
    hideAll("package3"); 
    $("#package3").fadeIn(500); 
    } 
}); 

function hideAll(exceptMe) { 
    $(".package").each(function(i) { 
    if ($(this).attr("id") == exceptMe) return; 
    $(this).fadeOut(1000); 
    }); 
}} 

注：

ですから、ケースには次のようになります私は35%に25%と3900にすべての2900を交換しました。

幸運:)