JSFiddle - React, Tailwind, and code Playground

HTML

<article id="a">A</article>
  <article id="b">B</article>
  <article id="c">C</article>

CSS

article{
  width:300px;
  height:2000px;
  margin:400px auto;
  border:2px solid red;
}
#b{height:30px;}

JavaScript

function inViewport($el) {
    var elH = $el.outerHeight(),
        H = $(window).height(),
        r = $el[0].getBoundingClientRect(), t=r.top, b=r.bottom;
    return Math.max(0, t>0? Math.min(elH, H-t) : Math.min(b, H));
}



var $a = $('#a'),
    $b = $('#b'),
    $c = $('#c');

$(window).on("scroll resize", function(){
  console.log(
    "a: "+ inViewport($a),
    "b: "+ inViewport($b),
    "c: "+ inViewport($c)
  );
});