如何修改jquery脚本以向下推送内容？

我使用的是jquery通知，但主要问题是它将通知添加到内容的顶部。我想把内容往下推。有什么建议吗

我用以下代码调用脚本：

<script type="text/javascript">
    $(document).ready(function() {
       showNotification({
            type : "success",
            message: "This is a sample success notification"
       }); 
    });
</script>

$（文档）.ready（函数（）{
展示通知({
键入：“成功”，
消息：“这是一个成功通知示例”
}); 
});

JQUERY：

/**
 * Javascript functions to show top nitification
 * Error/Success/Info/Warning messages
 * Developed By: Ravi Tamada
 * url: http://androidhive.info
 * © androidhive.info
 * 
 * Created On: 10/4/2011
 * version 1.0
 * 
 * Usage: call this function with params 
 showNotification(params);
 **/

function showNotification(params){
    // options array
    var options = { 
        'showAfter': 0, // number of sec to wait after page loads
        'duration': 0, // display duration
        'autoClose' : false, // flag to autoClose notification message
        'type' : 'success', // type of info message error/success/info/warning
        'message': '', // message to dispaly
        'link_notification' : '', // link flag to show extra description
        'description' : '' // link to desciption to display on clicking link message
    }; 
    // Extending array from params
    $.extend(true, options, params);

    var msgclass = 'succ_bg'; // default success message will shown
    if(options['type'] == 'error'){
        msgclass = 'error_bg'; // over write the message to error message
    } else if(options['type'] == 'information'){
        msgclass = 'info_bg'; // over write the message to information message
    } else if(options['type'] == 'warning'){
        msgclass = 'warn_bg'; // over write the message to warning message
    } 

    // Parent Div container
    var container = '<div id="info_message" class="'+msgclass+'"><div class="center_auto"><div class="info_message_text message_area">';
    container += options['message'];
    container += '</div><div class="info_close_btn button_area" onclick="return closeNotification()"></div><div class="clearboth"></div>';
    container += '</div><div class="info_more_descrption"></div></div>';

    $notification = $(container);

    // Appeding notification to Body
    $('body').append($notification);

    var divHeight = $('div#info_message').height();
    // see CSS top to minus of div height
    $('div#info_message').css({
        top : '-'+divHeight+'px'
    });

    // showing notification message, default it will be hidden
    $('div#info_message').show();

    // Slide Down notification message after startAfter seconds
    slideDownNotification(options['showAfter'], options['autoClose'],options['duration']);

    $('.link_notification').live('click', function(){
        $('.info_more_descrption').html(options['description']).slideDown('fast');
    });

}
// function to close notification message
// slideUp the message
function closeNotification(duration){
    var divHeight = $('div#info_message').height();
    setTimeout(function(){
        $('div#info_message').animate({
            top: '-'+divHeight
        }); 
        // removing the notification from body
        setTimeout(function(){
            $('div#info_message').remove();
        },200);
    }, parseInt(duration * 1000));   



}

// sliding down the notification
function slideDownNotification(startAfter, autoClose, duration){    
    setTimeout(function(){
        $('div#info_message').animate({
            top: 0
        }); 
        if(autoClose){
            setTimeout(function(){
                closeNotification(duration);
            }, duration);
        }
    }, parseInt(startAfter * 1000));    
}

/**
*用于显示顶级初始化的Javascript函数
*错误/成功/信息/警告消息
*开发人：Ravi Tamada
*网址：http://androidhive.info
*©androidhive.info
* 
*创建日期：10/4/2011
*版本1.0
* 
*用法：使用params调用此函数
显示通知（参数）；
**/
函数showNotification（参数）{
//选项数组
变量选项={
“showAfter”：0，//加载页面后等待的秒数
“持续时间”：0，//显示持续时间
“自动关闭”：false，//自动关闭通知消息的标志
'type'：'success'，//信息类型消息错误/success/info/warning
'message'：''，//发送给dispaly的消息
'链接通知'：''，//显示额外说明的链接标志
“描述”：“”//链接到描述，单击链接消息时显示
}; 
//从参数扩展数组
$.extend（true、options、params）；
var msgclass='such_bg'；//将显示默认的成功消息
如果（选项['type']=='error'）{
msgclass='error_bg'；//将消息重写为error message
}else if（选项['type']=='information'）{
msgclass='info_bg'；//将消息重写为信息消息
}否则如果（选项['type']='warning'）{
msgclass='warn_bg'；//将消息重写为警告消息
} 
//父Div容器
var容器=“”；
容器+=选项['message']；
容器+=''；
容器+=''；
$notification=$（容器）；
//上诉通知书
$（'body'）。追加（$notification）；
var divHeight=$（'div#info_message'）.height（）；
//请参见CSS从上到下的div高度
$（'div#info_message'）.css({
顶部：'-'+divHeight+'px'
});
//显示通知消息，默认情况下它将被隐藏
$（'div#info_message'）.show（）；
//开始后向下滑动通知消息秒后
slideDownNotification（选项['showAfter']、选项['autoClose']、选项['duration']）；
$（'.link_notification'）.live（'click'，function（）{
$（'.info\u more\u descrption'）.html（选项['description'））.slideDown（'fast'）；
});
}
//关闭通知消息的函数
//滑动消息
函数关闭通知（持续时间）{
var divHeight=$（'div#info_message'）.height（）；
setTimeout（函数（）{
$（'div#info_message'）。设置动画({
顶部：'-'+divHeight
}); 
//从正文中删除通知
setTimeout（函数（）{
$（'div#info_message'）。删除（）；
},200);
}，parseInt（持续时间*1000））；
}
//向下滑动通知
函数slideDownNotification（startAfter、autoClose、duration）{
setTimeout（函数（）{
$（'div#info_message'）。设置动画({
排名：0
}); 
如果（自动关闭）{
setTimeout（函数（）{
关闭通知（持续时间）；
}，持续时间）；
}
}，parseInt（startAfter*1000）；
}

一种可能性是在内容之前插入通知容器。然后可以将“初始高度”设置为0，并设置高度动画。随着通知容器的扩展，内容将向下移动

---

工作示例：

好的，不是一个完整的解决方案。。。问题是CSS无疑要负责将通知显示在页面顶部。在通知js中，您将找到该行

$('body').append($notification);

如果你改成

$('body').prepend($notification);

通知将显示在顶部，只要您还确保您的css具有：

#info_message {
   position:relative;
}

如果有一个

位置：绝对

，则您的通知将浮动在其他文本上

---

当通知出现和消失时，您的内容可能仍会有一点跳跃，但动画的其余部分应该可以。您可能需要将扩展/收缩高度与移动位置相结合，以获得平滑过渡，或者使用另一个库。

在HTML文件中添加一个div，在其中显示如下通知：

<body>
    <div id="notificationDiv">
        This is the DIV, where you want notification to appear.
    </div>
    <div id="content">
        This is content of the page.
    </div>
</body>

为此：

// Appeding notification to Body
$('#notificationDiv').html($notification);

你可以看看这个

要向下推送内容，请在jquery_notification.css文件中更改以下内容：

#info_message{
    display: none;
    width: 100%;
    height: 51px;
    position: absolute;
    top: 0;
    position: fixed;
    z-index: 50000;
    margin: 0;
    padding: 0;
}

。。。为此（删除两个位置属性）：

---

您能否提供用于设置添加通知样式的css？您可以在reprezentacija.lt上找到一个工作示例。如果你有任何其他建议，我将非常感谢你能与我分享。我不知道你是如何做到这一点的，以及我如何将它应用到我的版本中。我甚至复制了你的javascript版本，但仍然不好。即使我删除了“容器”，您的版本似乎仍在运行。你可以在reprezentacija.lt找到我的工作样本。如果您还有其他建议，如果您能与我分享，我将不胜感激。请尝试从

jquery.notification.css

中的

position:fixed

规则中删除

$（'div\info\u message'）.css（{top:'-'+divHeight+'px'）

带有

$（'div#info_message'）.css（{height:'0px'}），最后更改
$（'div#info_message'）。动画（{top:0}）到
$（'div#info_message'）。动画（{height:51}）
在
jquery.notification.js
中。我想我做了你说的一切：在顶部添加了一个额外的div，在.js文件$（'#notificationDiv'）.html（$notification）中添加了一行；但我还是得到了同样的结果。你可以在reprezentacija.lt再次感谢，这很有帮助。
#info_message{
    display: none;
    width: 100%;
    height: 51px;
    position: absolute;
    top: 0;
    position: fixed;
    z-index: 50000;
    margin: 0;
    padding: 0;
}

#info_message{
    display: none;
    width: 100%;
    height: 51px;
    top: 0;
    z-index: 50000;
    margin: 0;
    padding: 0;
}