活動div關閉後滾動條不滾動

Question

我有一個固定的菜單系統，可以滑出屏幕並在屏幕按下時覆蓋100％。當它處於活動狀態時，主滾動條將有能力滾動活動div中的菜單。一旦你關閉了菜單，滾動條將不允許我滾動整個網站，它只會滾動滑出div的長度。

我該如何解決這個問題？在菜單處於活動狀態時，我需要滾動條來控制菜單，然後在菜單處於非活動狀態時可以滾動整個站點。

這裏是我的JS和完整的代碼http://jsfiddle.net/8P9kh/8/

$(function(){ 
    window.status=0; 
$('#menu').click(function(){ 
    if(window.status==0){ 
     $('#slidingMenu').stop().animate({left:'0px'},500); 
     window.status=1; 
     $('body, html').css('overflow','hidden'); 
    } 
    else{ 
     $('#slidingMenu').stop().animate({left:'-100%'},500); 
     window.status=0; 
     $('body, html').css('overflow-y','scroll'); 
    } 
}); 
}) 

//Close menu when you click Footer 

$('#more').click(function() { 
var open = $('header').is('.open'); 
$('#dropFooter')['slide' + (open ? 'Up' : 'Down')](400); 
$('header').animate({ 
    bottom: (open ? '-' : '+') + '=200' 
}, 400, function() { 
    $('header').toggleClass('open'); 
}); 
}); 

$('#menu').click(function() { 
if ($('').is('.open')) { 
    $('') 
     .removeClass('open') 
     .animate({ 
     'bottom': "-=200" 
    }, function() { 
     var $footer = $('.activetoggle'); 

     if ($footer.length) 
      $footer 
       .toggleClass('activetoggle footerButton') 
       .text('Footer'); 
    }); 
    $('footer').slideUp(400); 
} 
}); 



$('.footerButton').click(function() {// Change wording once pressed 
var $this = $(this); 
$this.toggleClass('footerButton'); 
if ($this.hasClass('footerButton')) { 
    $this.text('Footer'); 
} else { 
    $this.text('Close'); 
} 
$(this).toggleClass('activetoggle'); 
}); 

$(window).resize(function(){ //check when window resize 
if($(window).width() < 780){ // check when the window width is less than 780 
if ($('header').is('.open')) { 
    $('header') 
     .removeClass('open') 
     .animate({ 
     'bottom': "-=200"     
    }); 
    $footer = $('.activetoggle'); 
    if ($footer.length) { 
     $footer.toggleClass('activetoggle footerButton').text('Footer'); 
    } 
    $('#dropFooter').slideToggle(400); 
} 
} 

}); 

Answer 1

現在，你設置CSS overflow屬性hidden當菜單顯示出來，但隨後overflow-x屬性設置爲scroll，留下overflow物業在hidden。重置overflow財產回auto：

$('body, html').css('overflow', 'auto');