Always ensuring that div tag is at top of page using jquery

Question

I have a div tag <div id="customError">Error</div> I want this div tag to always appear at the top of the page using jquery, so with otherwords even if the page is scrollable I want it to be always visible and on top of the page almost like the stackoverflow notification bar. Is this possible using JQuery? I tried a number of things and it disappears when the page is scrolled down. Any help advise will be appreciated.

Answer 1

CSS:

.top {
   top: 0px;
   position: fixed;
}

should meet your requirements.

If you, for some reason, need to dynamically adapt the position of an element, try this:

$(function(){
    var $myelement = $('#element_that_should_stay_on_top');

    $(window).bind('scroll', function(){
       $myelement.css({
           position: 'absolute',
           top: $(window).scrollTop()
       });
    });
});

Answer 2

use this

#customError { 
   position:fixed;
   top:0;
   left:0;
}

Answer 3

You can use css only:

#customError {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;

  /* IE6 */
  _position: absolute;
  _top: expression(document.getElementsByTagName("body")[0].scrollTop + "px");
}