Блог

У меня есть фиксированная система меню, которая выдвигается и занимает 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);
}
}

});
 

Прямо сейчас вы устанавливаете overflow для свойства CSS hidden значение, когда появляется меню, но затем устанавливаете overflow-x для свойства значение scroll , оставляя overflow свойство равным hidden . Сбросьте overflow свойство обратно в auto :

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