將文本和通知欄一起移動到頁面頂部

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>