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

Question

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

我也遇到了这个非常不错的页面反弹效果：

http://www.slidedeck.com/features/（看下面的紫色顶栏）

有没有简单的方法来做到这一点？也许只有 jQuery 或其他框架？

Answer 1

How about this? :) 只需添加一些精美的图形就可以了！

Answer 2

我刚刚从blog.grio.com找到了一个很棒且简单的解决方案

jsFiddle Demo

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

Answer 3

var _show = true;
$(document).ready(function() {

  $('button#showHide')
    .bind('click', function() {
      if (_show) {
        $('div#hideMe')
          .animate({
            'height': '25px'
          }, 750);
        _show = false;
      } else {
        $('div#hideMe')
          .animate({
            'height': '0px'
          }, 750);
        _show = true;
      }
    });
});

body {
  background-color: #003366;
  padding: 0px;
  margin: 0px;
  text-align: center;
}

button {
  cursor: pointer;
  right: 5px;
  float: right;
  position: relative;
  top: 5px;
}

div#hideMe {
  background-color: #FF3399;
  height: 0px;
  overflow: hidden;
  position: relative;
}

div#container {
  background-color: #FFFFFF;
  border: #FFFF00 1px solid;
  height: 600px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  position: relative;  
}

div#contents {
  height: 600px;
  position: absolute;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div id="hideMe">Congratulations, you just won a punch in the neck!</div>
<div id="container">
  <div id="contents">
    <button id="showHide">clicker</button>
  </div>
</div>

只是在玩这个。关于您的示例所做的事情。 :)

• 您可以通过大约 17,334,259 种不同的方式来执行此操作。但这会奏效。只要确保你的盒子相对定位，#hideMe 的扩展也会将#container 向下推。或者绝对定位并将其固定为 0px,0px。或者什么...

Answer 4

您可能需要通过 Ajax 获取要显示的消息，但是：

http://jsfiddle.net/ZpBa8/4/

展示了如何在 jQuery 的顶部显示一个条形图，并且是一个开始

Answer 5

制作您喜欢的页面的插件的人制作插件来做您喜欢的事情：http://www.hellobar.com/

Answer 6

Meerkat jQuery plugin 做得非常好。

Answer 7

这甚至可以在没有 jquery 的情况下轻松完成。只需使用 DOM 将 div 元素附加到 body 并将其顶部位置设置为零。将其宽度设置为 screen.width，高度设置为 50px。并且只是启动一个不透明度淡入/淡出。像下面的示例。此示例适用于 IE。阅读this 以供参考。调用 initFade 成为 Fade In 和 Fade out 进程。

var OP = 90;
function processFade() {
    var t = "";
    OP = OP - 3;
    if (OP < 0) {

        clearTimeout(t);
        OP = 90;
        return;
    }
    $("YOUR_DIV_ELEMENT_HERE").style.filter = "alpha(opacity=" + OP + ")";
    if (OP == 0) {
        $("YOUR_DIV_ELEMENT_HERE").style.display = "none";
        clearTimeout(t);
        OP = 90;
        return;
    }
    t = setTimeout("processFade();", 100);
}
function initFade() {
    processFade();
}