Hi Friends,
Many times we get into a situation where we want to know whether an element exists within a viewport of browser or not.
Here below. I am writing a function to check whether an elements exists in a viewport or not.
It will return true or false and by using this, one can use it in different situations.
.

First we will store the DOM element into a variable

var element = document.getElementById("element_id");

function checkIfElementIsWithinViewport(element) {
    if((element != undefined) && (element != null)) {
        var element_offets = el.getBoundingClientRect();
        return (
            (element_offets.top >= 0) &&
            (element_offets.left >= 0) &&
            (element_offets.bottom <= window.innerHeight) && 
            (element_offets.right <= window.innerWidth)
        );    
    } else {
        return false;
    }
}

Case 2:  If we want to any part of the element is inside the viewport.

function checkIfElementIsPartiallyInViewport(element) {
    if((element != undefined) && (el != null)) { 
          var ele_top = element.offsetTop;
          var ele_left = element.offsetLeft;
          var ele_right = element.offsetWidth;
          var ele_bottom = element.offsetHeight;

          while(el.offsetParent) {
            el = element.offsetParent;
            ele_top += element.offsetTop;
            ele_left += element.offsetLeft;
          }

          return (
            ele_top < (window.pageYOffset + window.innerHeight) &&
            ele_left < (window.pageXOffset + window.innerWidth) &&
            (ele_top + ele_bottom) > window.pageYOffset &&
            (ele_left + ele_right) > window.pageXOffset
          );

    } else {
        return false;
    }
}