CSS overlay on page with scrollbar

I have made overlay for my page, but it has one 开发者_StackOverflow中文版problem, when you scroll down the page, contet you can see by scrolling scrollbar doesn't have overlay on it. Is it possible to prevent this anyway?

See example here, just scroll down and see what is the problem.

http://jsfiddle.net/qXwTY/

---

Set .overlay { ... position:fixed;

You can read this article to understand more css positionning: CSS Positioning 101

---

On the overlay div:

position: fixed;

Instead of absolute :)

---

position: fixed not supported in old browsers specially IE 7. But you can do that through jQuery:

$(document).ready(function(){
$(".overlay").css({"height":$(".contents").innerHeight() + 20 + "px"});
});