javascript - 元素相对于视口(viewport)的位置

Question

我正在尝试计算元素相对于视口(viewport)的位置(上方、下方或视口(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;

只有当元素的高度与视口(viewport)相同时，才能正确计算。我错过了什么？

Answer 1

这个 api 对我有用:getBoundingClientRect ,它专门用于评估相对于视口(viewport)的位置。

这是我最后做的:

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