Question

I’m trying to fix a elements position based on the scroll position within the window.

I thought it would be as easy as getting the offset of the element where the fixed element should become fixed and then when the window.scrollTop is equal to it add CSS but it is weird.

It seems as though the offset of the element is larger than the scrollTop largest numeral.

Is there any other way of getting this to work?

I want it to have the same functionality as this with regards to the footer on scroll;

http://be.blackberry.com/

But I don’t want to clone the element, I want to detect when it gets to near the bottom of the page and then change the position on the bottom of the element.

Thanks in advance.

B

Answer 1

This should help get you in the right direction:

var footer = $("#footer");
// min amount to show when not scrolled to the bottom of the page.
var minVisable = 25;

$(parent.document).scroll(function() {
    // check position
    if (window.scrollY + window.innerHeight + minVisable > $("html").height()) {
        // if at the bottom of the page, stick the footer to it
        footer.css("position","absolute").css("top", $("html").height() - footer.height());
    } else {
        // else keep top part of footer on the screen
        footer.css("position","fixed").css("top", window.innerHeight - minVisable );
    }
});