Home/ Questions/Q 6985799
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T18:43:36+00:00

I am following this tutorial to show messages at top of browser window. jQuery

  • 0

I am following this tutorial to show messages at top of browser window.

jQuery Notification Message like StackOverflow

CSS:

#message {
    font-family:Arial,Helvetica,sans-serif;
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    z-index:105;
    text-align:center;
    font-weight:bold;
    font-size:100%;
    color:white;
    padding:10px 0px 10px 0px;
    background-color:#8E1609;
}

#message span {
    text-align: center;
    width: 95%;
    float:left;
}

Problem:

But problem is that it is shown above the page content at top and my website menu goes hidden behind it.

I want it to appear at top of the webpage content and when user close it then page content should move up. It should not also move when user scroll browser page. Just like stackoverflow.com.

How can I achieve this

Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Just place the <div> at the top of your <body> and use position: static. This is the default, so if you just leave position out, it will work as well.

    To also allow it to scroll, use Grim’s solution. Here is a working example: http://jsfiddle.net/PPvG/sECk9/1/

    You can create the placeholder programmatically, so it has the exact same height as the notice message:

    var placeholder = $('<div />').css('height', $('#notification').outerHeight());

    When removing the notification, you can remove the placeholder after the animation has finished by doing this:

    $('#notification').fadeOut("slow", function() {
    placeholder.remove();
});
    • 0