Question

I have a JQuery script to keep my footer always at the bottom of the browser no matter what.

The issue is it uses “Animate” to force it to move down or up which shows a footer scrolling from the top to the bottom every time a page loads. Like a flying footer bar.

I was wondering if there is an alternative from “Animate” to just force it to show up at the bottom and now a scrolling effects which shows it dragging down?

Snippet of code here, the “.animate” is what i need an alternative for i believe.

 $(window).bind("load", function() { 

   var footerHeight = 0,
       footerTop = 0,
       $footer = $("#Footer");

   positionFooter();

   function positionFooter() {

            footerHeight = $footer.height();
            footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px";


           if ( ($(document.body).height()+footerHeight) < $(window).height() + 150) {
               $footer.css({
                    position: "absolute"
               }).stop().animate({
                    top: footerTop
               })
           } else {
               $footer.css({
                    position: "static"
               })
           }

   }

   $(window)
           .scroll(positionFooter)
           .resize(positionFooter)

});

Answer 1

I figured it out. I needed to specify the delay on “.animate” to “0”. Below is the updated code.

  if ( ($(document.body).height()+footerHeight) < $(window).height() + 150) {
               $footer.css({
                    position: "absolute"
               }).stop().animate({
                    top: footerTop
               }, 0)
           } else {
               $footer.css({
                    position: "static"
               })
           }