CODEWITHSUNDEEP
javascriptjquery
jimmy
jimmy

Reputation: 35

Fixed position until scrolled

I was hoping someone could help me here.

Im trying to fix a div at the bottom of the page until the user scrolls it will then scroll up too.

Upvotes: 0

Views: 700

Answers (3)

jfriend00
jfriend00

Reputation: 707436

There is some ambiguity in your question for whether you want the div to position at the bottom of the whole document or initially position at the bottom of the window and then scroll.

At Bottom of Document

Positioning at the bottom of the document (no matter how long the document is) is easy. Just set this CSS on the div:

#yourDiv {
    position: absolute;
    bottom: 0;
}

This will position it at the end of the document. If the document is shorter than the window height, it will not be at the bottom of the window, but at the end of the document. If the document is taller than the window height, then it's location at the bottom of the document will initially be below the bottom of the window and will only be visible when the document is scrolled upwards.

At Bottom of Window, then Scroll in that Position

If you want it to initially appear at the bottom of the window, but then scroll in that position on the page as the page is scrolled, you can't do it with pure CSS, but will need javascript to position it.

In pseudo code:

wHeight = get height of window
oHeight = get height of your object that you want to place at the bottom
Then, set the position on your object using absolute position:
    o.style.position = "absolute";
    o.style.top = (wHeight - oHeight) + "px";

This will maintain that object at a fixed number of pixels from the top of the document even as you scroll.

Here's a working example using jQuery: http://jsfiddle.net/jfriend00/ZV2bM/

HTML:

<div id="footer">This is my footer</div>

CSS:

body {
    background-color: #777; 
    height: 4000px;
    padding: 0;
}
#footer {
    position: absolute; 
    text-align: center; 
    background-color: #444;
    width: 100%;
    color: #FFF;
}

JS:

var pos = $(window).height() - $("#footer").height();
$("#footer").css({top: pos});

Upvotes: 3

Frog
Frog

Reputation: 1641

That site just positions the div at the bottom and makes it scroll normally. If you want that, you can just use:

<div style="position: absolute; bottom: 0px; left: 0px;"></div>

Another advantage of this is that it works in all browsers, while position: fixed doesn't work in some older browsers like Internet Explorer 6.

Upvotes: 0

Joseph Marikle
Joseph Marikle

Reputation: 78530

<div style="position:fixed; bottom:0px; right:10px;">

or whatever for the right attribute.

Upvotes: 0

Related Questions