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和height，可以说是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();
}

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

7 个答案:

jsFiddle Demo