Multiple Top-Fixed Divs?

The easiest way to do this is to put a "holder" bar at the top of the page and then nest the "header" and "notification" elements within there.

For example:

CSS

#holder {
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
}

#header, .notify{
    //what ever styles you have
    //position: relative or static
}

HTML

<div id="holder">
    <div id="header">...</div>
    <div class="notify">...</div>
</div>

Edit

Working example: http://jsfiddle.net/Q6CWv/

Update

Adding a slide down effect on the .notify element should be fairly straight forward if you are using JQuery:

$('.notify').slideDown();

Working example: http://jsfiddle.net/Q6CWv/1/

Although the answer by @MyHeadHurts was somewhat helpful, it wasn't the best solution for me as when the notification popped down, it either overlapped the header bar or made it so that the header bar would not pop down until the notification did. I did have them in separate divs as suggested, but this could have been my fault.

My solution was to go into the JavaScript of the pop-down notification and change the "top" value to 3% of the page height. This now works perfectly, except that the header and notification bar don't align correctly if there are extreme levels of zoom applied.