Question

我试图检测当前窗口中可以看到的元素百分比。

例如，如果用户只能看到该元素的一半，则返回50.如果用户可以看到整个元素，则返回100.

到目前为止，这是我的代码：

function getPercentOnScreen() {
    var $window = $(window),
        viewport_top = $window.scrollTop(),
        viewport_height = $window.height(),
        viewport_bottom = viewport_top + viewport_height,
        $elem = $(this),
        top = $elem.offset().top,
        height = $elem.height(),
        bottom = top + height;

    return (bottom - viewport_top) / height * 100;
}

但它似乎并没有起作用。任何人都可以帮助我实现这一点，我似乎在旋转。

Answer 1

您想要获得的是元素延伸到视口顶部和底部的像素数量。然后你可以从总高度中减去它并除以该高度以获得屏幕上的百分比。

var px_below = Math.max(bottom - viewport_bottom, 0);
var px_above = Math.max(viewport_top - top, 0);
var percent = (height - px_below - px_above) / height;
return percent;

需要注意的一点是，jQuery的height方法不会包含填充。您可能希望使用.outerHeight。

Answer 2

您的$elem = $(this)分配似乎有误，此处函数范围表示this指的是您所在的函数（ala~函数getPercentOnScreen），请尝试通过$elem = $('#yourElementId')引用。

Answer 3

如果您只想计算元素百分比，那么就这样做

function getPercentOnScreen(elem) {
    $docHeight = $(document).height();
    $elemHeight  = $(elem).height();

    return ($elemHeight/$docHeight)* 100;
}

检测元素屏幕上的百分比

3 个答案: