stackoverflow barra de notificaciones estilo

Question

Duplicar posible:.?
Notification alert similar to how stackoverflow functions

La barra de notificación de la parte superior, que muestra las cosas como "que ganó insignia xyz" Como se hace soy tratando de crear algo similar en mi aplicación de rieles. Yo uso blueprint para mi diseño, es un diseño estándar de una sola columna de 950px, con todo desde el encabezado hasta el pie de página en un contenedor div.

Answer 1

Puede hacerlo con bastante facilidad con un elemento de posición fija que tiene un alto índice z que cualquier otro elemento en su página:

<div id="notification"> 
    You've earned xyz badge 
</div> 
<!-- rest of your site's markup --> 

Y con el siguiente CSS:

#notification { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    background: yellow; 
} 

Entonces es sólo es cuestión de comprobar al cargar la página si es necesario para crear y mostrar el #notification:

$(window).load(function(){ 
    if(showNotification){ 
     $('body').append(
      $('<div id="notification">You\'ve earned xyz badge</div>'); 
     ); 
    } 
});