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

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

Вот 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;}

scroll jquery sliding panel
person probablybest    schedule 05.02.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

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

person adeneo    schedule 05.02.2014
comment
Есть ли способ остановить перемещение содержимого, когда полоса прокрутки удаляется из основного содержимого и добавляется на панель? - person probablybest; 07.02.2014