How to show notification on top of screen?

I would like to use jQuery Notifications plugin, but it always puts the notification bar on the top of the page. So if the page it big, one have to scroll up to the top to see the notification.

Would it be possible to have the notification always show up in the top of the browser window, so the user won't have to scroll up to the top of the page?

This is the CSS, if that's where such a thing should be changed?

/* jQuery Notifications plugin - http://programmingmind.com */
/* notification container */
#jquery-notifications {
  position: relative;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 100000;
}
#jquery-notifications p {
  text-align: center;
  position: relative;
  margin: 0;
  padding: 5px;
  padding-left: 10px;
  border-bottom: 2px solid;
  /* style property for the close text */
}
#jquery-notifications p a {
  positio开发者_运维百科n: absolute;
  right: 10px;
  margin-right: 10px;
  color: black;
  text-decoration: none;
  border: 1px solid black;
  padding-right: 5px;
  padding-left: 5px;
}
#jquery-notifications .notice {
  background: #6c9ffc;
  color: #061a72;
  border-color: #061a72;
}
#jquery-notifications .success {
  background: #96f96f;
  color: #045419;
  border-color: #045419;
}
#jquery-notifications .warning {
  background: #f7ae57;
  color: #753903;
  border-color: #753903;
}
#jquery-notifications .error {
  background: #f97c6f;
  color: #570f01;
  border-color: #570f01;
}

Not knowing how the markup is actually used, I can't give you an exact fix.

But adding position: fixed; to the container (#jquery-notifications) should make it show up on top at all times.

Change this...

#jquery-notifications {
  position: relative;
  ...
}

...to this...

#jquery-notifications {
  position: fixed;
  ...
}

Fixed positioning is relative to the viewport, not the document.