如何获取元素当前 position 相对于 window 的百分比？

Question

I'm trying to return an element's position as a percentage based on where the element is in the window using jquery.

$(window).on('resize scroll', function() {
var docHeight = (function(){
              return Math.max(
                  $(document).height(),
                  $(window).height()
              );
            })();
var percent = (($(element).offset().top / docHeight) * 100);
console.log(percent);
});

I'm expecting the console to log the percentage of where the top of the element is in the window, ie if the element's top is at the bottom of window, the percentage is 0%, if the element's top is in the middle of the window, the percentage is 50%, etc. However, it is returning the position as a percentage in relation to the document and does not change when you scroll.

Answer 1

Probably wanna take a look at Element​.get​Bounding​Client​Rect() .

Returns information about an element's position.

Answer 2

Using getBoundindClientRect to get the element's position and innerHeight to get the viewport height, you can calculate the element's relative position:

$(window).scroll(function(){
    var elem = document.getElementById("myElement"),
        rect = elem.getBoundingClientRect(),
        pct  = (window.innerHeight-rect.top)/window.innerHeight;

    console.log(pct);
});