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:

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

It is working in your jsFiddle I think... what do you exactly want to accomplish? :) — Gintas K, Aug 05 '13 at 08:06
I'm sorry, I forgot to mention that by overlapping. I meant that I would somehow stop sliding and stop where the footer starts, and stay there. — lozadaOmr, Aug 05 '13 at 08:13
He wants the button to not overlap the footer, preferably stop before the footer. — Albzi, Aug 05 '13 at 08:13
have a look at this: http://stackoverflow.com/questions/15230035/overlapping-of-footer-by-element-with-fixed-position — Gintas K, Aug 05 '13 at 08:17

Albzi · Accepted Answer · 2013-08-05T08:28:51.907

7

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

edited Aug 05 '13 at 08:28

answered Aug 05 '13 at 08:12

Albzi

15,431
6
46
63

@BeatAlex thank you, this is what I'm trying to accomplish. Will try this. – lozadaOmr Aug 05 '13 at 09:09
@BeatAlex , I noticed that the JavaScript attaches the fixed_button class and that the property margin-top. But, I think I will be having problems when the content area expands dynamically lets say coming from PHP. – lozadaOmr Aug 05 '13 at 09:43

score 0 · Answer 2 · answered Aug 05 '13 at 08:05

0

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?

answered Aug 05 '13 at 08:05

I forgot to mention that I want my button to stop when it hits the footer area. I have read various solutions provided here on stack overflow but I don't think I'm getting nearer on achieving what I'm trying to do. – lozadaOmr Aug 05 '13 at 08:16
ah. I would recommend Javascript for that. Try using jquery; it has event listeners for scrolling that you could use. jQuery is in general one of the easiest and most flexible libraries, actually. – Aug 05 '13 at 08:30
user2652246: would you kindly recommend a site, where I can start? I have no experience working with JavaScript or jQuery. – lozadaOmr Aug 05 '13 at 09:54
Oh dear. Well, before working on a real website, I recommend first learning at least Javascript. net.tutsplus.com and w3schools.com are where I started learning. Also, the jQuery documentation: api.jquery.com. If you search up "scroll" on there, you'll see there's an onScroll function. – Aug 05 '13 at 09:56
no problem! :) We've all had those awkward first few months learning. – Aug 05 '13 at 10:00

score 0 · Answer 3 · answered Mar 21 '17 at 03:09

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.

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

3 Answers3

Linked