通過滾動百分比而不是滾動像素來更改圖像

Question

我已經獲得了一些JQuery代碼的幫助，使圖像動態更改3次，當我向下滾動頁面時。下面的代碼的工作原理，但我想你明白依靠像素是不是一件好事，因爲不同的屏幕有不同的決議。

所以我想改變...

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

注：我已經更換了所有2900 25%和3900至35%。

祝你好運:)