Javascript 如何计算50%的元素是否在视口中？

我目前正在使用getBoundingClientRect（）计算元素是否进入视口。但我真正需要做的是检查元素的50%（或任何给定百分比）是否已进入视口（我正在滚动检查）。如果它是可见的，那么我更新页面上的一些文本，说是，如果不是，那么文本说否

我似乎无法理解这个逻辑，它开始让我发疯，有人能帮忙吗

下面是当前代码

isBannerInView: function (el, y) {
  var _this = this,
    elemTop,
    elemBottom,
    elemHeight,
    isVisible;

  for (var i = 0; i < el.length; i++) {
    var pos = banners.indexOf(el[i]);

    elemTop = el[i].getBoundingClientRect().top;
    elemBottom = el[i].getBoundingClientRect().bottom;
    elemHeight = el[i].getBoundingClientRect().height;

    isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);

    _this.updateResults(el[i], pos, isVisible);
  };
},

updateResults: function (el, pos, isVisible) {
  var isInView = isVisible ? 'Yes' : 'No';

  document.querySelectorAll('.results')[0].getElementsByTagName('span')[pos].innerHTML = isInView;
},

isBannerInView：功能（el，y）{
var_this=这个，
elemTop，
埃伦博通，
elemHeight，
可见；
对于（变量i=0；i=0）和&（elemBottom

/**
*由Roko C.B.stackoverflow.com提供的inViewport jQuery插件/questions/24768795/
*
*返回包含参数的回调函数
*元素在视口中可见的当前像素量
*（最小返回值为0（视口外的元素）
*最大返回值是元素高度+边框）
*/
；（函数（$，win）{
$.fn.inViewport=函数（cb）{
返回此值。每个函数（i，el）{
函数visPx（）{
var elH=$（el）.outerHeight（），
H=$（win）.height（），
r=el.getBoundingClientRect（），t=r.top，b=r.bottom；
返回cb.call（el，数学最大值（0，t>0）数学最小值（elH，H-t）：（b=H/2；
$（this.css（{背景：ishalvisible？“绿色”：“红色”}）；
});

#横幅{
高度：600px；
背景：红色；
利润率：1500px0；
}


当我在视口中超过50%时，我将变为绿色

因此，该插件取自

注：由于收听
滚动
事件非常昂贵，您可能需要在代码中添加一个事件节流/去盎司延迟方法。
您具体遇到了哪些问题？看起来您没有尝试计算屏幕上元素的数量。这与