javascript 在页面顶部显示消息栏的简单方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5306280/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Simple way to show a message bar at the top of a page
提问by dynamic
I would like to implement something like stackoverflow does, the bar at top of the page that shows some message.
我想实现像 stackoverflow 那样的东西，页面顶部的栏显示一些消息。
I came across this pretty nice effect with a page bounce too:
我也遇到了这个非常好的页面反弹效果：
http://www.slidedeck.com/features/(look at the purple top bar coming down)
http://www.slidedeck.com/features/（看下紫色顶栏）
Is there a simple way to do this? Maybe with only jQuery or other framework?
有没有一种简单的方法可以做到这一点？也许只有 jQuery 或其他框架？
回答by Haochi
How about this?:) Just add some fancy graphics and it should be good to go!
这个怎么样？:) 只需添加一些精美的图形就可以了！
回答by Dan
I just found a great and simple solution From blog.grio.com
我刚刚从blog.grio.com找到了一个很棒的简单解决方案
jsFiddle Demo
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);
});
}
回答by Bosworth99
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>Was just playing around with this. Does about what your example did. :)
只是在玩这个。关于你的例子做了什么。:)
- you could do this about 17,334,259 different ways. But this'll work. Just make sure your boxes are positioned relatively, so the expansion of #hideMe pushes #container down too. Or absolutely position it and fix it to 0px,0px. or whatever...
- 你可以用 17,334,259 种不同的方式来做到这一点。但这会奏效。只要确保你的盒子相对定位，所以#hideMe 的扩展也会将#container 推下。或者绝对定位并将其固定为 0px,0px。管他呢...
回答by Gary Corbett
You'll need to fetch the message to display, possibly via Ajax, but:
您可能需要通过 Ajax 获取要显示的消息，但是：
shows how to show a bar across the top in jQuery and is a start
展示了如何在 jQuery 中在顶部显示一个栏，这是一个开始
回答by Daniel Crenna
The same people who make the plugin whose page you love make a plugin to do what you love about it: http://www.hellobar.com/
制作您喜欢的页面的插件的同一个人制作了一个插件来做您喜欢的事情：http: //www.hellobar.com/
回答by Ashwin Krishnamurthy
This can easily be done without jquery even. Just use the DOM to append a div element to the body and set its top position to zero. Set its width as the screen.width and height to be lets say 50px. And just initiate an opacity fade in/fade out. Like the following sample. This sample is for IE. Read thisfor reference. Call initFade to being the Fade In and Fade out process.
这甚至可以在没有 jquery 的情况下轻松完成。只需使用 DOM 将 div 元素附加到主体并将其顶部位置设置为零。将其宽度设置为 screen.width 和高度为 50px。只需启动不透明度淡入/淡出。像下面的例子。此示例适用于 IE。阅读本文以供参考。调用 initFade 作为淡入淡出过程。
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();
}
回答by orip
The Meerkat jQuery plugindoes this very nicely.
该猫鼬jQuery插件做到这一点非常漂亮。
