Javascript 在屏幕上检测元素的百分比

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

例如，如果用户只能看到元素的一半，则返回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;
}

---

但它似乎不起作用。有人能帮我实现这一点吗？我似乎在旋转齿轮。

您的

$elem=$（此）

赋值似乎错误，这里的函数作用域表示

此
指的是您所在的函数（ala~函数getPercentOnScreen），请尝试通过
$elem=$（“\35; yourElementId”）引用
相反。
如果您只想计算元素的百分比，则只需执行此操作

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

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

您想要得到的是元素超出视口顶部和底部的像素量。然后你可以从总高度中减去它，再除以这个高度，得到屏幕上的百分比

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
来实现此目的。
原始大小（以像素为单位）在哪里？首先，您需要设置一个宽度和高度变量来指示大小，然后尝试下面的一个答案并进行一些计算。例如，如果元素的大小是200px乘以200px，而新的大小是150px乘以75px，那么答案是（150+75）/（200+200）*100=56.25%，这取决于函数的调用方式。如果将其用作事件处理程序，
this
将是元素。@JamesMontagne很好地说明了这一区别，s'pose如果扩展了jquery s.t，则同样适用。它是使用
$（元素）调用的。getPercentOnScreen（）