I am working on a mobile website for a client for which i was asked to incorporate a side menu panel. Now, the functionality i want to achieve is that when that panel opens, the body scroll is disabled but the panel scroll remains. Also, to enable users to be able to close the panel when they click anywhere else on the body, i made a div and positioned it fixed with a translucent background and on click of that div i toggle the side menu. So, to disable the body scroll, i gave it a class of position as fixed and overflow hidden when the menu opens.
Now the problem is that on my localhost, it works perfectly, shows the translucent background and disables the body scroll, but on the live server although the body scroll gets disabled but the translucent div that i created is showing as opaque. I don't understand why. I know this is a CSS issue but inspecting the source doesn't have any conflicting css. if i remove the position fixed from body, it shows the translucent div but the body scroll comes back.
I cant give the link as it is for a client but maybe someone can help me to disable the body scroll in some other way.
Please help.