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;
}

当前的行为是它在页面顶部正确显示，但是当submnit按钮向下滚动时，我希望此栏不是从页面顶部显示，而是从“当前视图”的顶部显示页面“（这有意义吗？）并且没有按下页面内容（这就是它现在所做的）。

是否有可能以一种简单的方式实现这一目标（而不是我自己最清晰的工具）？

由于

Answer 1

我认为通过在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

通知栏从页面顶部滑入

1 个答案: