Search code examples
jquerycsssticky-footer

jQuery sticky footer when not in view

Another sticky footer question i'm afraid. Can't quite seem to find a suitable method of what Im trying to achieve.

I have a footer which is currently position relative at the bottom of a dynamic height middle container.

When the window becomes smaller than the bottom of the footer I need the footer to be absolutely positioned to the bottom of the window and slightly transparent.

I currently have this but can't seem to get it working:

var footer = $('footer');
var start = $(footer).offset().top;

$.event.add(window, "scroll", function() {
    var pos = $(window).height();
    $(footer).css('position',((pos)<start) ? 'relative' : 'absolute');
    $(footer).css('bottom',((pos)<start) ? '0px' : '');
});

Please help.

Thanks guys

Solution

  • Should probably add this as a answer:

    Managed to get this working how i wanted it: jsfiddle.net/tc7p3/4 If there's a way to improve it then please suggest a better way. thanks