jquery - 通知栏从页面顶部滑入

Question

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

目前的行为是它正确地出现在页面顶部，但是随着提交按钮向下滚动，我希望这个栏不是从页面顶部出现，而是从“当前 View ”的顶部出现页面”(这有意义吗？)并且没有下推页面的内容(这是它现在所做的)。

是否有可能以一种简单的方式实现这一点(我自己不是盒子里最锋利的工具)？

谢谢

Answer 1

我认为通过在 CSS 属性中使用一些固定定位，您可以轻松地将通知栏定位在当前视口(viewport)的顶部。

.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