通知欄從頁面頂部滑入

在頁面中，我想在提交表單後顯示感謝消息。我用這個jQuery通知欄從頁面頂部滑入

$(document).ready(function(){ 
    $("#contactForm").submit(function(data) { 
     $.post('web_contactoPrueba.php', {nombre: $('#nombre').val(), email: $('#email').val(), asunto: $('#asunto').val(), telefono: $('#telefono').val(), comentario: $('#comentario').val(), enviar: 'yes'}, function(data) { 
      $("<div />", { class: 'topbar', text: data }).hide().prependTo("body") 
      .slideDown('fast').delay(5000).slideUp(function() { $(this).remove(); $(location).attr('href','http://www.delagua.es/index.html');}); 
     }, 'text') 
     return false; 
    }); 
});

這個CSS

.topbar { 
    background: #F68A0E; 
    height: 60px; 
    line-height:60px; 
    font-size:25px; 
    border-bottom: solid 2px #EEE; 
    padding: 3px 0; 
    text-align: center; 
    color: white; 
}

而且目前的行爲是它出現在頁面頂部正常，但隨着submnit按鈕向下滾動，我想這欄不會從頁面的頂部顯示，而是從「當前頁面視圖」的頂部顯示（這是否合理？），並且不會按下頁面內容（現在就是這樣）。

是否有可能以一種簡單的方式實現這一點（不是盒子裏最鋒利的工具）？

感謝

來源

2012-07-28 mitomed

「當前頁面視圖」 - 我想你的意思是視口。你想要酒吧出現在視口的頂部... – Lix 2012-07-28 20:01:58

從來沒有聽說過這個表達，利克斯，謝謝。我想是的，屏幕會比我的「當前頁面視圖」更好，不是嗎？ – mitomed 2012-07-28 20:04:21

我想你就可以通過在你的CSS屬性使用一些固定的定位很容易地放置您的通知欄總是在當前視口的頂部。

.topbar { 
    background: #F68A0E; 
    height: 60px; 
    line-height:60px; 
    font-size:25px; 
    border-bottom: solid 2px #EEE; 
    padding: 3px 0; 
    text-align: center; 
    color: white; 

    /* properties to "lock" the top bar at the top of the viewport. */ 
    position:fixed; 
    top:0px; 
    left:0px; 
    width:100%; 
}

jsFiddle Example

來源

2012-07-28 20:06:44 Lix

感謝Lix，它現在在視口的頂部，儘管不是顯示整個酒吧只是顯示左邊的角落，實際上會截斷消息 – mitomed 2012-07-28 20:13:58

@mitomed use'width：100％;' – 2012-07-28 20:17:40

是的 - 我剛纔說的如果你明確指定通知欄的'width'和'left'屬性，它可能會有所幫助。 – Lix 2012-07-28 20:18:20

通知欄從頁面頂部滑入

回答

相關問題