Question

I am building a menu in jQuery using .animate() but I’ve run into a problem. I have a div that initially loads with position:fixed and bottom:30px. Upon click of a link, I want my div to move to the height position of that link. Essentially, I have this:

http://jsfiddle.net/wRjyK/32/

The problem is that the first animation initially moves from off of the top of the screen in a downward motion. (Because it doesn’t have a top property) I want the animation to start with its current position. When I repeat the animation with other links, it looks fine because my div now has the proper top property to work off of.

A simple fix would be to change the css of my div to have a top property, but my design requires the bottom property. Any ideas?

Answer 1

There are a few keys to making this work. Here’s a jsFiddle example.

$('a').click(function(){
    var offsetTop = $(this).offset().top;
    var footerOffsetTop = $('.footer').offset().top;
    $('.footer').css({position:'absolute',bottom:'',top:footerOffsetTop})
        .animate({top:offsetTop},500);
});

It essentially works like this:

1. Find the footer’s offset().top value
2. Change the footer’s CSS so that it is absolutely positioned with the
   top: property having the value found in #1. This keeps allows you to
   animate it’s top property, without having it jump.