JS - 獲取視口中元素的百分比

Question

我想獲取元素（div）在視口中的百分比。

• 當元素進入我想要的0
• 值視當元素和元素的高度離開視我想要的100

這裏的價值是什麼5個視我想這樣做http://imgur.com/2ZPpps5

我想：

$(window).bind('scroll',function(){ 
var viewportHeight = $(window).height(), 
elementOffsetTop = $('#element').offset().top, 
elementHeight = $('#element').height(); 

var numerator = 200 * (window.pageYOffset-elementOffsetTop+viewportHeight); 
var denominator = (elementOffset+elementHeight+viewportHeight); 
console.log(numerator/denominator); 
}); 

這段代碼有效。 （我不明白爲什麼我必須乘以2）。

但是當我調整我的網頁，這個代碼不工作（0之間的值，以85 ...）

想法？

Answer 1

http://jsfiddle.net/nate/4N3Pj/1/

var $element = $('#element'); 
var $win = $(window); 
var $vis = $('#visible'); 

$win.on('scroll', function() { 
    console.log(percentageSeen()); 
    $vis.text(percentageSeen() + '%'); 
}); 

function percentageSeen() { 
    var viewportHeight = $(window).height(), 
     scrollTop = $win.scrollTop(), 
     elementOffsetTop = $element.offset().top, 
     elementHeight = $element.height(); 


    if (elementOffsetTop > (scrollTop + viewportHeight)) { 
     return 0; 
    } else if ((elementOffsetTop + elementHeight) < scrollTop) { 
     return 100; 
    } else { 
     var distance = (scrollTop + viewportHeight) - elementOffsetTop; 
     var percentage = distance/((viewportHeight + elementHeight)/100); 
     percentage = Math.round(percentage); 
     return percentage; 
    } 
} 

$win.trigger('scroll');