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:

).addClass('fixed_button'); }else{ $('#button').removeClass('fixed_button'); } });

CSS:

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

Solution 2:

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.

Share