jquery sticky Footer: it comes from top of page instead from bottom page

Question

I Have edited Sticky Footer script in this way:

<script type="text/javascript">
    function stickyFooter(){
            jQuery("#stickyFooter").css({position: "absolute",top:($(window).scrollTop()+$(window).height()-$("#stickyFooter").height())+"px"});
    }

    function myStickyFooter(){
            jQuery("#stickyFooter").css({position: "absolute"});
            jQuery("#stickyFooter").animate({
            top:($(window).scrollTop()+$(window).height()-$("#stickyFooter").height())+"px"
          }, 2000, function() {
          });
    }

    jQuery(function(){

        myStickyFooter();
        jQuery(window)
            .scroll(stickyFooter)
            .resize(stickyFooter);
    });
</script>

So, on firefox it works fine; on Chrome or Ie, it works .. conversely: stickyFooter appears from top to bottom page. Why? Thanks a lot!

Did you know you can set "bottom" as a CSS attribute instead of "top"? — Blazemonger, Jun 26 '12 at 16:31

score 2 · Answer 1 · edited Oct 04 '12 at 18:56

2

This works with all browsers.

SOLUTION:

You need to put up extra work to set initial position of sticky footer to window.height() and then animate it up to window.height()-($('#footer').height())

edited Oct 04 '12 at 18:56

Spectre87

2,374
1
24
37

answered Oct 04 '12 at 18:51

Laxmeesh Joshi

21
2

jquery sticky Footer: it comes from top of page instead from bottom page

1 Answers1