Sliding panel scroll focus jquery

Question

I have a link that when clicked on covers the content with a dark overlay and triggers a hidden panel to slide in from the right. This all works fine however when i scroll the background content moves and not the panel content. What is the best way to make the background content no longer "active/scrollable" and just the content in the sliding panel is scrollable until it is closed?

Here is a JSFiddle for it.

And here is my jquery

$('#sauceThumb').click(function(){
    $('#cover').fadeIn(200);
    $('#sauceDet').animate({
        right: "0"
    });
});
$('.close').click(function(){
    $('#sauceDet').animate({
        right: "-99999"
    });
    $('#cover').fadeOut(200);
});

& CSS

.workIndvWrapper {
width:80%;
background:#ff0000;
height:100%;
position:fixed;
right:-9999px;
z-index:999;}
#cover {
background:rgba(0, 0, 0, 0.6);
width:100%;
height:100%;
position:fixed;
z-index:10;
display:none;}

Answer 1

It's not going to be as easy as just flipping a switch, you have to actually remove the scrollbar from the document by setting the scroll overflow to hidden, get the scroll position and scroll the window, as some browsers scroll to the top when you remove the overflow, and then when you click to remove the overlay, get the scrollbar back and set the scroll position again

$('#sauceThumb').click(function () {
    $('#cover').fadeIn(200);
    $('#sauceDet').animate({
        right: "0"
    });
    var scrollPos = {
        top  : self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
        left : self.pageYOffset || document.documentElement.scrollTop  || document.body.scrollTop
    };
    $('body, html').data('scroll', scrollPos).css('overflow', 'hidden');
    window.scrollTo(scrollPos.top, scrollPos.left);
});
$('.close').click(function () {
    $('#sauceDet').animate({
        right: "-99999"
    });
    $('#cover').fadeOut(200);
    var pos = $('body, html').css('overflow', 'auto').data('scroll');
    window.scrollTo(pos.top, pos.left);
});

FIDDLE