Question

我有一个代表导航栏的div元素，其ID为#navbar。它绝对定位并设置为bottom: 20px;。现在我想让它移动到顶部，同时保持与顶部的距离为20px，只需点击一下按钮即可。再次单击该按钮时，即使窗口已调整大小，它也应移回页面底部（再次保持20px距离）。通常，窗口的大小调整应该对导航栏没有影响。这是我的JavaScript代码。

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

但它不起作用，并且栏总是在页面中间结束。非常感谢任何帮助。

修改：以下是一个示例：https://jsfiddle.net/6knLw3a3/

Answer 1

bottom和top将根据它最接近显式定位的祖先来定位一个绝对定位的元素。因此，请确保将position:relative放在容器元素上。

Answer 2

建议只动画一个道具bottom或top 示例：https://jsfiddle.net/17oy80c3/

Answer 3

我找到了一个解决方案：将导航栏元素包装在叠加div中。将此叠加div设置为位于所有其他元素之上并使其透明。将导航栏定位在叠加层的顶部。现在只需设置叠加层的高度即可。

从底部到顶部和背面动画div

3 个答案: