CSS过渡 - 在固定和绝对定位之间切换

时间:2013-02-16 11:40:38

标签: javascript jquery css css-transitions transition

我试着解释一个让我难过的大问题。

基本上,我有一个#menu介于绝对位置(靠近页面顶部)和固定位置(到窗口顶部,向下滚动页面)之间。我使用jquery来实现这一目标。

当它修复后,我给它一个" .fixed"类。这给了它" top:0px; position:relative;"。 #menu有一个转换,但#menu.fixed删除了转换。这在开始时很有效,当向下滚动然后使其连接到窗口的顶部时。当新班级移除了过渡时,切换位置是完美的。

但是,当我向上滚动时,它会删除" .fixed"类,它将(现在)绝对定位的#menu从0px动画到615px。这意味着它会跳到页面顶部,然后向下滚动,因为它不再修复。

这是代码:

$('#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.

我认为这是因为该元素在" .fixed"之前实际上没有被重新定位。 class被删除了,因此它用它的新定位来动画...我可以做一个间隔或类似的东西来触发类被删除,但它看起来很傻。

我也意识到我可以让它定位:绝对一直都是如此。滚动时只需重新定位顶值。但这似乎是多余的......

有谁知道如何解决我的问题?

0 个答案:

没有答案