Q: Sliding tab's background disappears at the scrolling / overflow portion Sliding tab CSS is as follows:
#tab_slide {
    overflow-x: auto; // added by me for vertical scrollbar
    overflow-y: auto; // added by me for vertical scrollbar
    height: 100%!important; // added by me for vertical scrollbar
    color: #000; 
    font-family: inherit;
    font-size: 14px;
    top: 5%;
    position: fixed;
    z-index: 2147483647;
}

The CSS for the slide tab background is as follows:
#tab_slide_background {
    background: #fff;
    box-shadow: 1px 1px 2px #000;
    height: 100%;
    opacity: 0.8;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}

Unfortunately if there is any overflow and the scrollbar appears, there is no background when you scroll down.

The website in question is at http://thehungrygeek.com
I would appreciate any help in figuring out how to make the background appear when the user has to scroll down (i.e. user's display height is smaller than slide tab content)!

A: Get the height of content then apply the same to background div:
<script type="text/javascript">
$(document).ready(function(){
    var heightPanel = $('#tab_slide_include').height();
    $('#tab_slide_background').height(heightPanel);
});
</script>

Add this code after loading your jQuery file. I hope you know where you have used jQuery file. ;)

A: Well, gave up on putting a scrollbar on the sidebar.
Ended up using:
#tab_slide {
top: 50%
margin-top:-410px!important;
}

