将文本和通知栏一起移动到页面顶部

Question

我从页面的底部通知栏向上滑了一下。一切都按照预期完美运行，但是当我试图让该栏从页面顶部向下滑动时，文本的行为就会有所不同。如果我将它从底部向上滑动，则文本随div一起移动，当从上方滑下时，文本在div滚动文本时显示为保持原位。我怎样才能防止这种情况发生？

下面是我的代码，当我改变“顶部：0”而不是“底部：0”时，使它从底部弹出（文本在div内移动）。文字似乎从一开始就处于一个固定的位置。

$("p").click(function() { \t \t 
 
     $('#message-box').slideToggle('slow').delay(1500).slideToggle('slow'); 
 
    }); \t

#message-box { 
 
     display: none; 
 
     width: 100%; 
 
     background-color: #FFA339; 
 
     height: 50px; 
 
     line-height: 50px; 
 
     text-align: center; 
 
     font-size: 30px; 
 
     color: #35220C; 
 
     position: absolute; 
 
     bottom: 0; 
 
     z-index:50; 
 
     font-weight: bold; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> 
 
    
 
    <div id='message-box'>notification</div> 
 
    <p>click here</p>

Answer 1

所以 - 酒吧是50像素高，而该文本被那些50像素得益于其行高的中心。该计算基于文本与容器顶部之间的空间。

从屏幕底部滑动时，酒吧的高度从底部到顶部逐渐增大。由于文本的位置基于容器的顶部，因此随着容器顶部向上移动，这会创建文本与“框”滑动的视觉效果，使其看起来像是在一起制作动画。

从屏幕顶部滑动时，条的高度从顶部到底部逐渐增大。文本不会移动，因为它始终与该容器的顶部隔开，与屏幕顶部占用相同的50像素，因此您只能看到它“显示”。

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

$("p").click(function() { 
 
    $('#message-box').addClass('show').delay(1500).queue(function() { 
 
    $(this).removeClass('show').dequeue(); 
 
    }); 
 
});

#message-box { 
 
    width: 100%; 
 
    background-color: #FFA339; 
 
    height: 50px; 
 
    line-height: 50px; 
 
    text-align: center; 
 
    font-size: 30px; 
 
    color: #35220C; 
 
    position: absolute; 
 
    top: 0; 
 
    z-index: 50; 
 
    font-weight: bold; 
 
    transform: translateY(-100%); 
 
    transition: transform .6s; 
 
} 
 

 
#message-box.show { 
 
    transform: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> 
 

 
<div id='message-box'>notification</div> 
 
<p>click here</p>