jQuery .animate() and css position with fixed element

Question

I am struggling to come up with a way to get this to work so looking for some help.

I have a fixed side navigation menu that is off screen. I am looking to have it animate from off screen to a specific position on screen. Additionally, the amount it needs to move by changes depending on screen size (i.e. gutters change sizes). So, I need to move it to a specific position relative to the container div (that remains centered on the screen).

What would the best approach to this be? Any help is appreciated. Thanks!

Answer 1

I am not sure I fully understand what you are looking for but heres a fiddle I think is what you are looking for:

http://jsfiddle.net/phoffman/vyaHH/5/

You need to animate the sidebar div making sure it is within the container div, and its CSS position is set to 'relative'.

HTML:

 <div class="container">
     <div id="sidebar"> <p>This is a sidebar</p> </div>
 </div>

CSS:

#sidebar{
    position:relative;
}

Jquery:

$('button').click(function(){
    $('#sidebar').animate({
        left: 0 //This value of 0 is how far you want the sidebar to animate.
    });
});