How to calculate if 50% of element is in viewport?

Question

I'm currently using getBoundingClientRect() to work out if an element enters the viewport. What I really need to do though is to check whether 50% (or any given percentage) of the element has entered the viewport (i'm checking on scroll). If it is visible then I update some text on the page to say yes, if it isn't then the text says no.

I can't seem to get my head around the logic and its starting to drive me crazy, is anyone able to help?

Current code below!

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;
},

Which part specifically are you having trouble with? It doesn't look like you've done anything to attempt to calculate the amount of the element on the screen. — zzzzBov, Nov 30 '15 at 18:48
this is very similar to http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling?rq=1 — tylerlindell, Nov 30 '15 at 18:51

score 3 · Accepted Answer · edited May 23 '17 at 10:30

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>

So the plugin is taken from https://stackoverflow.com/a/26831113/383904
P.S: since listening to scroll events is quite expensive you might want to add to the code an events Throttle/Debounce delay method.

How to calculate if 50% of element is in viewport?

1 Answers1