title: Checking if a div is visible within viewport using jquery
body: <p>I am trying to use jquery to check if Div RED is within the viewport, and if not, then check if  Div ORANGE is in the viewport. The function I am using works great if there is only one IF statement, but when I add another IF ELSE statement, it wont work. </p>
  
  <p>here is the function:</p>
  
  <pre><code>$.fn.isOnScreen = function(){
  
      var win = $(window);
  
      var viewport = {
          top : win.scrollTop(),
          left : win.scrollLeft()
      };
      viewport.right = viewport.left + win.width();
      viewport.bottom = viewport.top + win.height();
  
      var bounds = this.offset();
      bounds.right = bounds.left + this.outerWidth();
      bounds.bottom = bounds.top + this.outerHeight();
  
      return (!(viewport.right &lt; bounds.left || viewport.left &gt; bounds.right || viewport.bottom &lt; bounds.top || viewport.top &gt; bounds.bottom));
  
  };
  </code></pre>
  
  <p>here is the code I added to check and see if div red or div orange is within the viewport</p>
  
  <pre><code>$(window).scroll(function() {
      if ($('.red').isOnScreen() === true) { 
         $('.red').remove();
      } else if ($('.orange').isOnScreen() === true) {
         $('.orange').remove();   
  
      }
  });
  </code></pre>
  
  <p>here is a jfiddle <a href="http://jsfiddle.net/wN7ah/453/" rel="noreferrer">http://jsfiddle.net/wN7ah/453/</a> </p>