关于视口的元素位置

Question

I am trying to calculate an element's position with respect to viewport(above, below or in viewport) :

    var viewportBottom = function () {
            return window.pageYOffset;
        },
        viewportTop = function () {
            return window.pageYOffset - window.innerHeight;
        },
        elementTop = function ($e) {
            return $e.offset().top - $e.height();
        },
        elementBottom = function ($e) {
            return elementTop($e) + $e.height();
        };


var aboveViewport = viewportTop() > elementBottom(this.$e),
        belowViewport = viewportBottom() < elementTop(this.$e),
        inViewport = !aboveViewport && !belowViewport;

This calculates correctly only as long as the element's height is same as viewport. What am i missing ?

Answer 1

This api worked for me : getBoundingClientRect , It is specifically provided for evaluating the position with respect to viewport.

Here is what I ended up doing:

var container     = element.getBoundingClientRect(),
    aboveViewport = (container.top  + container.height) < 0 ,
    belowViewport = container.top > $(window).height(),
    inViewport    = !aboveViewport && !belowViewport,