Скользящая панель прокрутки фокуса jquery

Question

У меня есть ссылка, которая при нажатии закрывает содержимое с темным наложением и вызывает скрытую панель, чтобы скользить справа. Однако все это прекрасно работает, когда я прокручиваю фоновое движение, а не содержимое панели. Каков наилучший способ сделать фоновый контент больше не "активным / прокручиваемым", и только контент на скользящей панели можно прокручивать до тех пор, пока он не будет закрыт?

Вот JSFiddle для этого.

И вот мой 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

Это будет не так просто, как просто щелкнуть переключатель, вам нужно удалить полосу прокрутки из документа, установив скрытую переполнение прокрутки, получить положение прокрутки и прокрутить окно, как некоторые браузеры прокручивают вверх при удалении переполнение, а затем, когда вы нажмете, чтобы удалить наложение, верните полосу прокрутки назад и снова установите положение прокрутки.

$('#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