I need to find the distance between the element and the bottom of the browser window

Unlike other systems coordinates in browser is from top to bottom, it means top of the browser is y=0.

There is two DOM element property for getting position of an element on the page. The properties are element.offsetTop and element.offsetHeight

You can calculate the space between your element and bottom of the page by calculating element.offsetTop and window.innerHeight.

var space = window.innerHeight - element.offsetTop

if you want to calculate space between bottom of your element and bottom of the window then you need to add your element height too.

var space = window.innerHeight - element.offsetTop + element.offsetHeight

This calculation is sometimes necessary. Think you have percent based positioning and you want to know position of your element by pixels to do something. For example you have a div positioned like this:

div{
    width:300px;
    height:16.2%;
    position:absolute;
    top: 48.11%;
    border:3px dotted black;
}

Then you want to know when the div is close to browser window to change it’s color:

var div = document.querySelector('div'),
    space = innerHeight - div.offsetTop + div.offsetHeight;

 window.onresize = function(){
    space = innerHeight - div.offsetTop + div.offsetHeight;
    if(space < 200){
        div.style.background = 'blue';
    }
};

Fiddle