javascript - Scroll bar not scrolling after active div is closed -
i have fixed menu scheme slides out , covers 100% of screen 1 time pressed. when active the main scrollbar have ability scroll through menu in active div. 1 time close menu scrollbar not allow me scroll whole site anymore, scroll length of div slides out.
how can prepare issue? need scrollbar command menu 1 time active, have ability scroll whole site 1 time menu not active.
here js , total code 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 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 () {// alter wording 1 time 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 window width less 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); } } });
right now, you're setting css overflow
property hidden
when menu shows up, setting overflow-x
property scroll
, leaving overflow
property @ hidden
. reset overflow
property auto
:
$('body, html').css('overflow', 'auto');
javascript jquery html css
No comments:
Post a Comment