Javascript 设置从下到上和从后的div动画

我有一个

div

元素，它代表一个导航栏，id为

#navbar

。绝对定位，设置为

bottom:20px。现在我希望它移动到顶部，同时保持20像素的距离顶部，点击一个按钮。再次单击按钮时，即使窗口已调整大小，也应移回页面底部（再次保持20px的距离）。通常，窗口的大小调整对导航栏没有影响。这是我的JavaScript代码

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

<>但是它不起作用，条总是在页面中间结束。非常感谢您的帮助

编辑：
下面是一个示例：
底部
和
顶部
将根据绝对定位元素最近的显式定位祖先来定位绝对定位元素。因此，请确保在容器元素上放置
position:relative
。
建议仅设置一个道具
底部
或
顶部


示例：
我找到了一个解决方案：将navbar元素包装在覆盖div中。将此覆盖div设置为位于所有其他元素之上，并使其透明。将导航栏定位在覆盖的顶部。现在只需设置覆盖层的高度
 可以添加完整的html代码和Js FIDLE吗？但是当我在导航栏位于顶部时调整窗口大小时，它会移动