Question

我正在尝试计算元素相对于视口的位置（上方，下方或视口中）：

    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;

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

Answer 1

这个api对我有用：getBoundingClientRect，它专门用于评估关于视口的位置。

这是我最终做的事情：

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

关于视口的元素位置

1 个答案: