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

Question

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:<

Answer 1

I was looking for something similar and couldn't find any suitable answer here is what I came up with.

var $fixed_element = $(".some_element")
if($fixed_element.length){
        var $offset = $(".footer").position().top,
            $wh = $(window).innerHeight(),
            $diff = $offset - $wh,
            $scrolled = $(window).scrollTop();
        $fixed_element.css("bottom", Math.max(0, $scrolled-$diff));
    }

So now the fixed element would stop right before footer. and will not overlap with it.