Element in viewport or not in jQuery

by Faisal Khan Janjua

HTML

<div class="box red"></div>
<div class="box green"></div>
<div class="box blue"></div>
<div class="box orange"></div>
<div class="box pink"></div>
<div class="box skyblue"></div>
<div class="box brown"></div>
<div class="box violet"></div>


<span>Click on Boxes</span>
<code></code>

CSS

body {
  margin: 0;
}
.box {
  width: 100px;
  height: 100px;
  margin-bottom: 100px;
  background: #333;
  transition: all ease-out 0.2s;
}
.box.violet {
    margin-bottom: 0;
}
.red {
	background: red;
}
.green {
	background: green;
}
.blue {
	background: blue;
}
.orange {
	background: orange;
}
.pink {
	background: pink;
}
.skyblue {
	background: skyblue;
}
.brown {
	background: brown;
}
.violet {
	background: violet;
}
span, code {
  position: fixed;
  right: 20px;
  top: 20px;
  text-align: right;
}
span em {
  color: #f00;
  width: 30px;
  display: inline-block;
}
code {
  top: 140px;
}

JavaScript

alert('Ready');

$(document).on('click','.box', function(){
	var ph = $('body').height();
	var wh = $(window).height();
  var sp = $(window).scrollTop();
  var eot = $(this).offset().top;
  var elm = $('.'+$(this).attr('class').replace('box ',''));
  $('.box').width('100px');
  
  var prevClass, prevElm, elmTop, elmBottom, screenBottom, screenTop ;
  var checkBox = $(this).next();
  
  if(checkBox.length){
  	prevElm = $('.'+checkBox.attr('class').replace('box ',''));
    prevClass = prevElm.attr('class');
  	prevElm.width('150px');
    
  	// required section start   
    screenBottom = $(window).scrollTop() + $(window).innerHeight();
    screenTop = $(window).scrollTop();
    elmTop = prevElm.offset().top;
    elmBottom = prevElm.offset().top+prevElm.outerHeight();
    
    if( (screenBottom > elmTop) && (screenTop < elmBottom) ){
      $('code').html(prevClass + ' box is <u>Visible</u>');
    }else {
      $('code').html(prevClass + ' box is <u>Not Visible</u>');
    }
    // required section ends
    
  }
  
  
  var span = 'Page height: <em>'+ ph +'</em>';
  span += '<br>window height: <em>' + wh +'</em>';
  span += '<br>Scroll Position: <em>' + sp +'</em>';
  span += '<br>Element Top: <em>' + elmTop +'</em>';
  span += '<br>Element Bottom: <em>' + elmBottom +'</em>';
  
  $('span').html(span);
});