Javascript 将文本与页面顶部的通知栏一起移动

我从底部通知栏为我的页面制作了一个简单的幻灯片。一切都按预期完美运行，但当我试图使该条从页面顶部向下滑动时，文本的行为是不同的。如果我让它从底部向上滑动，文本会随着div一起移动，当从上面向下滑动时，当div在文本上滚动时，文本会保持在原位。我怎样才能防止这种情况发生

下面是我的代码，当我更改为“top:0”而不是“bottom:0”时，它会从底部弹出（文本在div中移动）。文本似乎从一开始就处于固定位置

$（“p”）。单击（函数（）{
$（“#消息框”）.slideToggle（'slow'）.delay（1500）.slideToggle（'slow'）；
});

#消息框{
显示：无；
宽度：100%；
背景色：#FFA339；
高度：50px；
线高：50px；
文本对齐：居中；
字体大小：30px；
颜色：#35220C；
位置：绝对位置；
底部：0；
z指数：50；
字体大小：粗体；
}

通知
单击此处

因此-条形图的高度为50px，由于其行高，文本居中于50px。该计算基于文本距容器顶部的空间

当从屏幕底部滑动时，条的高度从底部向顶部增加。因为文本的位置是基于容器顶部的，所以当容器顶部向上移动时，这会创建文本与框“一起”滑动的视觉效果，使它们看起来像是在一起制作动画

从屏幕顶部滑动时，条的高度从上到下逐渐增加。文本不会移动，因为它总是与容器顶部隔开，占据着与屏幕顶部相同的50px，所以您只会看到它“显示”

因此，作为修复，我已经完全删除了jQuery动画，并向您展示了如何使用更平滑的CSS转换来完成此动画。现在，通过使用jQuery切换一个类，整个条从屏幕外切换到屏幕上，而不是改变其高度

$（“p”）。单击（函数（）{
$（“#消息框”）.addClass（'show'）.delay（1500）.队列（函数（）{
$（this.removeClass（'show'）.dequeue（）；
});
});
#消息框{
宽度：100%；
背景色：#FFA339；
高度：50px；
线高：50px；
文本对齐：居中；
字体大小：30px；
颜色：#35220C；
位置：绝对位置；
排名：0；
z指数：50；
字体大小：粗体；
转换：translateY（-100%）；
转变：转变6s；
}
#message-box.show{
转化：无；
}

通知
单击此处