Bottom floating div (like in facebook messages)

Question

I'm looking for some type of css (maybe jquery) solutions where the div would always stay at the bottom of the sreen - like this is done on facebook -> view messages -> individual message conversation. The "Reply" box always stays at the bottom and when you scroll to the top to see previous messages the reply box also moves up.

thanks

if you want an item to be fixed on the page, give it the css property, position: fixed — Ibu, Jul 05 '11 at 07:12
Do you have specific browser requirements? If you need IE6 support `position:fixed`, on its own, will not work. — andyb, Jul 05 '11 at 07:19

AlienWebguy · Accepted Answer · 2011-07-05T08:13:46.037

6

HTML:

    <body>
        <div id="footer"></div>
    </body>

CSS:

#footer {
    position:fixed;
    bottom:0;
    height:100px;
    width:100%;
}

jQuery to scroll to bottom on load:

$(function(){
    $("body").animate({scrollTop: $(this).height()}, 1000); 
});

http://jsfiddle.net/AlienWebguy/CCpJg/5/

edited Jul 05 '11 at 08:13

answered Jul 05 '11 at 07:20

AlienWebguy

75,484
17
116
141

the problem with this is that when i scroll to the top the "footer" div should be always on TOP of the page content. So the page starts off being "at the bottom", and I should be able to scroll to top. – ShaneKm Jul 05 '11 at 07:55

score 0 · Answer 2 · answered Jul 05 '11 at 07:13

0

Why not using CSS fixed positioning?

#bottomDiv
{
   position: fixed;
   right: 50px;
}

answered Jul 05 '11 at 07:13

Saeed Neamati

34,403
40
131
186

2

Just trying to imitate Facebook, nothing more :D – Saeed Neamati Jul 05 '11 at 07:32

score 0 · Answer 3 · answered Jul 05 '11 at 07:13

0

you can use the css property

div.theItem {
   position: fixed;

}

answered Jul 05 '11 at 07:13

Ibu

41,298
13
73
100

Bottom floating div (like in facebook messages)

3 Answers3

Linked