如何计算50%的元素在视图中？

Question

我目前正在使用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;
},

Answer 1

http://jsbin.com/qojogo/2/edit?html,css,js,output

/**
 * inViewport jQuery plugin by Roko C.B. stackoverflow.com/questions/24768795/
 *
 * Returns a callback function with an argument holding
 * the current amount of px an element is visible in viewport
 * (The min returned value is 0 (element outside of viewport)
 * The max returned value is the element height + borders)
 */
;(function($, win) {
  $.fn.inViewport = function(cb) {
     return this.each(function(i,el) {
       function visPx(){
         var elH = $(el).outerHeight(),
             H = $(win).height(),
             r = el.getBoundingClientRect(), t=r.top, b=r.bottom;
         return cb.call(el, Math.max(0, t>0? Math.min(elH, H-t) : (b<H?b:H)));  
       }
       visPx();
       $(win).on("resize scroll", visPx);
     });
  };
}(jQuery, window));



$("#banner").inViewport(function( px ){
  var h = $(this).height();
  var isHalfVisible =  px >= h/2;
  $(this).css({background: isHalfVisible?"green":"red"});
});

#banner{
  height:600px;
  background:red;
  margin:1500px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="banner">I'll turn GREEN when I'm more than 50% in viewport</div>

所以这个插件是从https://stackoverflow.com/a/26831113/383904上拿来的

P.S:因为侦听scroll事件非常昂贵，所以您可能需要在代码中添加一个events Throttle/De弹延迟方法。