在页面顶部显示消息栏的简单方法

Question

我想实现类似stackoverflow的东西,页面顶部显示一些消息的栏.

我也遇到了一个非常好的效果,页面反弹也是如此:

http://www.slidedeck.com/features/(看看紫色的顶部酒吧)

有一个简单的方法吗？也许只有jQuery或其他框架？

Answer 1

这个怎么样？:)只需添加一些花哨的图形,它应该是好的去!

Answer 2

我刚刚从blog.grio.com找到了一个非常简单的解决方案

jsFiddle演示

function showNotificationBar(message, duration, bgColor, txtColor, height) {

    /*set default values*/
    duration = typeof duration !== 'undefined' ? duration : 1500;
    bgColor = typeof bgColor !== 'undefined' ? bgColor : "#F4E0E1";
    txtColor = typeof txtColor !== 'undefined' ? txtColor : "#A42732";
    height = typeof height !== 'undefined' ? height : 40;
    /*create the notification bar div if it doesn't exist*/
    if ($('#notification-bar').size() == 0) {
        var HTMLmessage = "<div class='notification-message' style='text-align:center; line-height: " + height + "px;'> " + message + " </div>";
        $('body').prepend("<div id='notification-bar' style='display:none; width:100%; height:" + height + "px; background-color: " + bgColor + "; position: fixed; z-index: 100; color: " + txtColor + ";border-bottom: 1px solid " + txtColor + ";'>" + HTMLmessage + "</div>");
    }
    /*animate the bar*/
    $('#notification-bar').slideDown(function() {
        setTimeout(function() {
            $('#notification-bar').slideUp(function() {});
        }, duration);
    });
}