CSS Transitions - Toggle between fixed and absolute positioning

Question

I will try to explain the big problem that puzzled me a lot.

Basically, I have #menu, which is between absolute positioning (when approaching the top of the page) and a fixed location (at the top of the window when scrolling the page). I am using jquery to accomplish this.

When it commits, I give it a class of ".fixed". Which gives it "top: 0px; position: relative;". #menu has a jump to it, but # menu.fixed removes the jump. This works great at the beginning when it scrolls down and then attaches to the top of the window. Switching positions is flawless, as the new class has remote transitions.

However, when I scroll through the backup and delete the “.fixed” class, it animates (now) the absolutely positioned #menu from 0px to 615px. This means that it jumps up to the top of the page and then scrolls down since it no longer locks.

This is the code:

$('#menu').css({ top: '615px'}); // top was 0px before this. It is still fixed, so it should NOT animated.
$('#menu').removeClass('fixed'); // Now the transition kicks in
//As it at 615px, it should stay where it is, not start animating to 615px from 0px as it does.

I think this is because the element was not rearranged by the time the ".fixed" class is removed, and thus it animates a new positioning with it ... I could do an interval or something like that to call the class to be removed, but that just seems silly.

I also know that I could just position it: absolutely all the time. And just move the top value while scrolling. But that seems redundant ...

Does anyone know how to solve my problem?