Instead of position:fixed
, this tiny plugin was a crossbrowser experiment to set an absolute
positioned element to the bottom of the page.
And it works. (IE6,7,8 / MOZ / Saf, Mob.Safari533.1 / O / ... ) Almost.
The 'only' problem is that when the page is scrolled --> the div shakes.
Do I need to bind to the .scroll() event some setInterval() or setTimeout() or something?
Any ideas? Any suggestion? Thanks in advance!
The plugin:
(function($) {
$.fn.jFooter = function() {
var footer = this;
var fooH = footer.outerHeight();
function setFooPos() {
winH = $(window).height();
winS = $(window).scrollTop();
tot = (winH - fooH)+winS;
footer.css({
position: 'absolute',
top: tot + 'px'
});
}
// a div to compensate the scroll start:
$('body').append('<div id="fC" style="position:relative;height:'+ fooH +'px;width:100%;clear:both;"/>');
setFooPos();
$(window).bind('scroll resize',function () {
setFooPos();
});
};
})(jQuery);