Example with elmPosiz script

The code for this example:

<div class="apare">
<div id="dv1">DIV to be checked.<br>Some content in this Div.</div>
<div id="dv1_data">Here it displays data with: position, size, visible percent in viewport</div>
</div>

<script src="elmposiz.js"></script>
<script>
// object of html where data will be displayed
var dv1_data = document.getElementById('dv1_data');

//function to be passed to "listen" property; adds data from "ob_dv1" in #dv1_data
function showElmdata(){
  dv1_data.innerHTML ='Visible in Viewport: '+ob_dv1.visibleY+' %<br>Top: '+ob_dv1.top+'<br>Left: '+ob_dv1.left+'<br>Width: '+ob_dv1.width+'<br>Height: '+ob_dv1.height;
}

//create object with the elmPosiz() for #dv1
var ob_dv1 = new elmPosiz('#dv1');

//add showElmdata to the listen property, executed when the page scrolls or window resizes
ob_dv1.listen = showElmdata;
</script>