How to prevent fixed button from overlapping footer area and stop the button on top of where the footer is located

How to prevent fixed button from overlapping footer area and stop the button on top of where the footer is located

I am trying to create a button that is fixed on the lower-left side of the screen. I tried to setup in JSFiddle to recreate what I’m trying to do.

Here is my HTML:

<div id="header">header
</div>
<div id="button">button
</div>
<div id="content">some content
</div>
<div id="footer">footer
</div>

And the CSS:

#header,#footer{
background-color:red;



}
#content
{
    height:2000px;
}
#footer
{
    height:200px;
}
#button
{
    background-color:gray;
    width:100px;
    height:100px;
    position:fixed;
    bottom:0;
    left:0;
    right:0;    
}

I have read that, I should use plugins such as scrolltoFixed.js, lockfixed.js
but my problem is I don’t know how to use or even where to start editing the javascript.
Here is a fiddle

I want the button to stop where the footer is, and make it like it was docked.

Updated now so that it sticks above footer.

Hope this is what you meant
The jQuery:

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 200) {
       $('#button').addClass('fixed_button');
   }else{
       $('#button').removeClass('fixed_button');
   }
});

CSS:

.fixed_button{
    position:absolute !important;
    margin-top:1900px;
    bottom: auto !important;
}
.
.
.
.