動畫的div頂部和背部

Question

我有一個div元件，其代表一個導航欄和具有ID #navbar。它被絕對定位並被設置爲bottom: 20px;。現在，我希望它移動到頂部，同時保持20px的距離，點擊一個按鈕。當再次單擊該按鈕應該回移動到頁面（再保持20像素的距離），即使該窗口已被調整的底部。一般來說，窗口的大小調整對導航欄應該沒有影響。這是我的JavaScript代碼。

var isUp = false; 
function animate() { 
    if(!isUp) { 
     $("#navbar").animate({top: 20}, 2000); 
    } else { 
     $("#navbar").animate({bottom: 20}, 2000); 
    } 
} 

但它不起作用，酒吧總是在頁面中間結束。任何幫助是極大的讚賞。

EDIT： 下面是一個例子：https://jsfiddle.net/6knLw3a3/

Answer 1

bottomtop和將根據其定位的絕對定位的元素是最接近明確定位的祖先。所以請確保您將position:relative放在容器元素上。

Answer 2

諮詢動畫只有一個道具bottom或top。
例如：https://jsfiddle.net/17oy80c3/

Answer 3

我發現了一個解決方案：將導航欄元素包裹在覆蓋div中。將此覆蓋div設置爲高於所有其他元素並使其透明。將導航欄放置在疊加層的頂部。現在只需設置疊加層的高度即可。