JSFiddle - React, Tailwind, and code Playground

HTML

<article id="a">A</article>
  <article id="b">B 30px height + 4px borders</article>
  <article id="c">C</article>

CSS

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

JavaScript

/**
 * inViewport jQuery plugin by Roko C.B.
 * http://stackoverflow.com/a/26831113/383904
 * 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)
 */
;(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) : Math.min(b, H)));  
            } visPx();
            $(win).on("resize scroll", visPx);
        });
    };
}(jQuery, window));



$("article").inViewport(function(px){
    console.log(this.id+' '+px);
});