通知栏从页面顶部滑入

在页面中，我想在提交表单后显示感谢消息。我用这个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

通知栏从页面顶部滑入

回答

相关问题