lightbox window issue in safari and chrome

Question

I have a problem in chrome and safari using the simple lightbox example in the book jquery novice to ninja

$('body').css('overflow-y', 'hidden'); // hide scrollbars!
    $('<div id="overlay"></div>')
      .css('top', $(document).scrollTop())
      .css('opacity', '0')
      .animate({'opacity': '0.5'}, 'slow')
      .appendTo('body');

The problem is if the page is longer than the window I can scroll and see a distinct line between the overlay and the where the jquery calculated to the height of the window,

in firefox, I can't scroll. So this is not really a problem; Colorbox or another is not an option as I need to do too much customisation to the loightbox.

Answer 1

position: fixed for the overlay sorts this problem nicely!