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.

Answer 2

Use absolute positioning instead. Also, don't use left:0 and right:0. Only use one or the other. Try

position:absolute;
bottom:0;
left:0;

EDIT: sorry, your code seems to work. What is it you want to do, exactly?

Answer 3

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;
}