问题
I'll try to explain a big problem that has me stumped.
Basically, I have a #menu that goes between absolute positioned(when close to the top of the page) and fixed positioned(to the top of the window, when scrolling down the page). I'm using jquery to accomplish this.
When it gets fixed, I give it a ".fixed" class. Which gives it "top:0px;position:relative;". #menu has a transition to it, but #menu.fixed removes the transition. This works great in the beginning, when scrolling down and then having it become attached to the top of the window. Switching the positions is flawless as the new class has the transitions removed.
However, when I scroll back up, and it removes the ".fixed" class, it animates the (now) absolutely positioned #menu from 0px to 615px. Which means it jumps up to the top of the page, and then scrolls down, as it's not fixed anymore.
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's at 615px, it should stay where it is, not start animating to 615px from 0px as it does.
I think it's because the element hasn't actually been repositioned by the time the ".fixed" class is removed, and thus it animates down with it's new positioning... I could do an interval or something similar to trigger the class to be removed, but it just seems silly.
I'm also aware that I could just make it positioned:absolutely all the time. And just reposition the top-value when I scroll. But that seems redundant...
Does anyone know how to solve my problem?
来源：https://stackoverflow.com/questions/14909870/css-transitions-switching-between-fixed-and-absolute-positioning