Question

更新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>

更新2：

我现在将div添加到顶部，但内容不会被推倒： http://jsfiddle.net/qTw9P/7/

不确定我做错了什么。

更新1：

以下jsfiddle可以正常显示/隐藏不隐藏任何内容的通知：

http://jsfiddle.net/qTw9P/4/

然而，当滚动时，通知会从页面上滚动，滚动时，它应该保持在可见页面的顶部。

原始问题：

有人可以指点一个通知系统/插件/教程，它会创建类似于stackoverflow中显示的通知的通知吗？

基本上，通知应该是可堆叠的，并且它们不应该与页面重叠，即实际页面内容向下移动，因此页面上的任何内容都不会被通知覆盖。同时，即使滚动，通知也应始终保持在可见屏幕的顶部。基本上，堆栈流通知似乎是如何工作的。

Answer 1

要找到一个包含您指定内容的系统，插件或教程会很困难但AJAX notifications with jQuery怎么样？

Answer 2

为了在滚动时将通知保留在页面顶部，您必须使用position:fixed;。

为了确保页面仍然关闭，在添加通知时，您还可以添加一个具有一定高度的div作为推送器以降低内容。

当您收到多个通知时，您必须根据之前通知的高度计算新通知必须显示的垂直位置。

寻找通知系统

2 个答案: