Как вычислить, если 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

jsBin demo

/** 
* 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
PS: так как слушать scroll событий довольно дорого вы можете добавить код накануне nts Метод задержки дроссельной заслонки/декомпрессии.