Element position with respect to viewport

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 ?

Possible duplicate of [How to tell if a DOM element is visible in the current viewport?](http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport) — Ohgodwhy, Nov 30 '15 at 18:31

score 0 · Accepted Answer · answered Dec 30 '15 at 19:35

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,

Element position with respect to viewport

1 Answers1