Question

我有一个固定的菜单系统，一旦按下就滑出并覆盖100％的屏幕。当它处于活动状态时，主滚动条将能够滚动活动div中的菜单。关闭菜单后，滚动条将不再允许我滚动整个网站，它只会滚动滑出div的长度。

如何解决此问题？我需要滚动条来控制菜单一旦激活，然后能够在菜单未激活时滚动整个站点。

$(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，保留{{ 1}} overflow处的属性。将hidden媒体资源重置为overflow：

auto

活动div关闭后滚动条不滚动

1 个答案: