I don't know if I am specific enough,

But I created a lightbox-style fadein background but it appears to me that the background won't reach the very bottom of the page. So when I scroll, the white background appears again.

Here is the demo:
<http://jsbin.com/limiyisi/1/>

HTML

```
<body>
<div id="overlay"></div>   

<a  style="position:absolute;" href="#" class="btn btn-default" data-toggle="active">    
Button </a>
<div class="ex-height"></div>

```

CSS

```
#overlay {
position:absolute;
width: 100%;
height : 100%;
background: #000;
top: 0;
left: 0;

opacity:0;
transition: opacity .3s;
-moz-transition: opacity .3s;
-webkit-transition: opacity .3s;
}

.backdrop {
opacity: 0.4 !important;
}

.ex-height {
height: 1204px;
}

```

Jquery

```
$(function() {

function toggle() {
   $('#overlay').toggleClass('backdrop');
   }

 $('[data-toggle="active"]').click(toggle);

 });

```

Thanks for any helpful advice!