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.

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.

• javascript
• html
• css

• It is working in your jsFiddle I think... what do you exactly want to acplish? :) – Gintas K Commented Aug 5, 2013 at 8: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 Commented Aug 5, 2013 at 8:13
• 3 He wants the button to not overlap the footer, preferably stop before the footer. – Albzi Commented Aug 5, 2013 at 8:13
• @lozadaOmr edit your question with what you wanted.. – Prasanth Commented Aug 5, 2013 at 8:15
• 1 I've added a new fiddle to my answer, please take a look :) – Albzi Commented Aug 5, 2013 at 8:29

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

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?

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.