2
通知システムを探して：解決UPDATE 3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#notifications").hide();
var height = 0;
var count = 0;
$("#show").click(function() {
count += 1;
$("#notifications").append("<div class='notification' id='n" + count + "'><span>notification " + count + "</span><input type='button' class='notification_button' id='b" + count + "' value='x' /></div>").show();
height += $("#n" + count).height();
$("#content").css("padding-top", height + "px");
});
$(":button.notification_button").live('click', function() {
var number = parseInt($(this).attr("id").substring(1));
height -= $("#n" + number).height();
$("#content").css("padding-top", height + "px");
$("#n" + number).remove();
});
});
</script>
<style type="text/css">
body {
padding:0px;
background-color:#00ff00;
}
#notifications {
background-color:#ff0000;
z-index:9999999;
position:fixed;top:0px;left:0px;
width:100%;
}
.notification {
height:35px;
}
.notification_button {
float:right;
}
</style>
</head>
<body>
<div id="notifications"></div>
<div id="content">
<input type="button" id="show" value="show" /><br /><br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fringilla metus nibh, sit amet posuere lectus. Donec neque elit, tristique eget aliquet a, sagittis ut massa. In vestibulum pellentesque massa sit amet ullamcorper. In eget diam eros, non volutpat purus. Maecenas aliquam ultricies tristique. Aliquam venenatis laoreet lectus et molestie. Fusce adipiscing molestie urna, sit amet fringilla sem ornare eu. Phasellus a felis ac quam consectetur scelerisque nec vitae est. In posuere malesuada aliquet. Nulla ultrices vulputate nisl et ullamcorper. Aliquam erat volutpat. Cras tortor justo, porta vitae eleifend sed, egestas non purus. Nullam massa odio, dapibus vitae hendrerit at, dictum et ante. Quisque condimentum justo eu arcu sodales vitae auctor massa aliquet. Vivamus tristique suscipit sem, id venenatis velit convallis id. Phasellus sit amet magna ut augue aliquam porttitor.</p>
<p>Sed vitae mauris nulla, at sagittis tellus. Proin dapibus congue massa non rutrum. In orci nulla, auctor vitae hendrerit id, mollis quis enim. Mauris blandit libero sed risus vulputate ornare vitae nec sapien. Sed eu ligula ut nulla faucibus sagittis non ac libero. Suspendisse laoreet bibendum consequat. Duis enim massa, rutrum ut iaculis quis, dignissim et neque. Quisque ac est felis, vel dapibus erat. Nulla facilisi. Nulla eros augue, ornare sit amet adipiscing vel, interdum ac dui. Aliquam orci risus, interdum cursus tincidunt quis, euismod sit amet sapien. Vivamus sollicitudin tempus risus, in ullamcorper lectus sagittis non. Phasellus nec gravida ante. Mauris vitae quam a nisl ornare rutrum.</p>
<p>Aliquam id neque ut dui placerat tincidunt. Nunc feugiat arcu sed risus dictum lacinia. Proin at purus eros. Sed adipiscing tincidunt nulla vitae molestie. Quisque sapien magna, molestie placerat tincidunt ut, porta eget arcu. Aliquam facilisis faucibus justo, ut placerat massa sagittis ut. Quisque ullamcorper lacinia tellus, nec mattis augue euismod sit amet. Nunc tristique congue odio ut consequat. Cras eget orci sed erat ullamcorper consectetur. Phasellus blandit, neque sit amet varius bibendum, ipsum purus vehicula tellus, at eleifend tortor turpis interdum erat. Quisque faucibus posuere accumsan. Fusce sem ipsum, tempus vel pharetra eleifend, scelerisque at justo. Nulla risus eros, faucibus iaculis sagittis nec, ultricies hendrerit neque.</p>
<p>Curabitur neque dolor, convallis in tempor eget, ultricies a massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed varius felis ut leo vehicula vehicula. Phasellus tellus mi, pretium ac vehicula non, convallis sed turpis. Nullam at auctor neque. Proin ac orci vel mauris mollis suscipit nec eget felis. Phasellus vel laoreet enim. Sed at mi in est feugiat suscipit non non mauris. Suspendisse vel enim lorem, et scelerisque quam. Aenean elementum elementum mi, quis dignissim dui rhoncus et. Integer viverra luctus vulputate. Maecenas nisi libero, pharetra id vestibulum eget, dignissim elementum ipsum. Vivamus quis eros nibh, in commodo ligula. Integer mi odio, fringilla sit amet sagittis sit amet, congue eget dui. Maecenas sollicitudin ante a nulla placerat congue. Integer interdum posuere diam a fringilla. Aenean accumsan orci nec sem aliquam elementum. Sed in quam eu urna lobortis eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<p>Mauris pulvinar, nisi vitae facilisis fermentum, mi eros ultricies ipsum, non lacinia nunc turpis vel tortor. Nunc vel sapien ut diam porttitor euismod at quis tortor. Aenean quis lacus id dolor luctus eleifend in id arcu. Suspendisse potenti. Duis dui libero, dictum quis elementum eu, egestas ac dui. Maecenas egestas dapibus ipsum. Vivamus ut ipsum in tortor ultrices imperdiet. Etiam augue felis, gravida quis dictum at, tempus eget arcu. Duis elementum diam sit amet sapien luctus scelerisque. Proin non purus nulla. Cras vehicula, tellus vitae pellentesque sagittis, lectus nisl faucibus ligula, nec tincidunt risus elit luctus risus. Praesent sit amet commodo urna. Maecenas quis dui tellus, nec semper elit. Praesent porta, augue fringilla vehicula porta, diam lectus gravida sapien, sed molestie augue tellus in risus. Vivamus lectus dui, ultrices nec dapibus vitae, posuere eget velit. Donec scelerisque molestie lorem, in convallis justo consequat non. Sed sed enim eu nisl rutrum placerat.</p>
</div>
</body>
</html>
UPDATE 2：
私は今トップへのdivのを追加しているが、コンテンツではありません下に押し込まれる： http://jsfiddle.net/qTw9P/7/
私が間違っていることをよく分からない。
UPDATE 1：以下jsfiddleは、コンテンツの任意の隠さない通知表示/非表示のinterms正しく動作
：
http://jsfiddle.net/qTw9P/4/しかし
、スクロール、通知をスクロールするページの外に出て、表示されているページの上部にとどまるべきです。
元の質問：
誰かが私はstackoverflowの時にここに示した通知に類似の通知を作成する通知システム/プラグイン/チュートリアルを指していただけますか？
基本的には、通知はスタック可能であり、ページと重ならないようにしてください。つまり、実際のページコンテンツが下に移動し、ページ上の何も通知の対象にならないようにします。同時に、スクロールしても表示は常に表示画面の上部にとどまるべきです。基本的には、スタックオーバーフロー通知がどのように機能するように見えますか。
@FrédéricHamidi、そのリンクの通知は、私が欲しくないウェブページのコンテンツに乗っている。私は通知をトップに残したいが、ページの内容を下に移動するので、スタックオーバーフロー通知がどのように機能するかなど、何も重なっていない。 – oshirowanen
true、jBarでさえオーバレイしか使用していないようです。 [stackoverflow関数と同様の通知アラート]（http://stackoverflow.com/q/3718125/464709）をご覧ください:) –
その投稿のCSSとそのコメントに基づいて、通知は、コンテンツを押し下げることなく、ページの上部にあるようにします。私は競争を押し下げたいが、同時に、スクロールするときに、一番上の可視ページに通知を保持する。 – oshirowanen