Ändern Sie das Bild durch Scrollen Prozent statt Bildlauf Pixel

Question

Ich habe etwas Hilfe mit einigen Jquery-Code bekommen, um ein Bild dynamisch ändern 3 Mal, wie ich weiter unten auf der Seite scrollen. Der untenstehende Code funktioniert wie gewohnt, aber ich denke, Sie verstehen, dass es nicht gut ist, sich auf Pixel zu verlassen, da unterschiedliche Bildschirme unterschiedliche Auflösungen haben.

Deshalb würde Ich mag das ändern ...

(pos > 2900 && pos < 3900)

auf etwas mehr wie ...

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

so dass der Übergang funktioniert genau das gleiche auf jedem Bildschirm.

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); 
    }); 
}} 

Wer hat irgendwelche Ideen?

Als Referenz meine Work-in-progress Seite: http://www.johnmorganstudios.se/client-sevn/

Answer 1

Was ich für Sie in diesem Moment empfehlen könnte, wäre:

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

Hinweis: /2 bedeutet 50% und /5 bedeutet 20% und so .

So In Sie Fall ist es wird so etwas wie sein:

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); 
    }); 
}} 

Anmerkung: Ich ersetzt alle 2.900-25% und 3.900-35%.

Viel Glück :)