Is there a way to create a CSS overlay menu that prevents the main content it covers from scrolling when the menu is active? In other words, I want users to be able to scroll through the menu without affecting the background content.
I've managed to create a menu overlay, but whenever someone scrolls through it, the background content also scrolls. Is there a way to freeze the background when the menu is open?
Below is the JavaScript code I used for the menu:
// Function to display menu overlay and hide background content
function openNav() {
document.querySelector("nav").style.display = "block";
document.querySelector("body").style.background = "#999";
document.getElementById("btn-menuclose").style.display = "block";
document.getElementById("btn-menu").style.display = "none";
document.getElementById("background").style.display = "none";
}
// Function to close menu overlay and reveal background content again
function closeNav() {
document.querySelector("nav").style.display = "none";
document.querySelector("body").style.background = "#fff";
document.getElementById("btn-menuclose").style.display = "none";
document.getElementById("btn-menu").style.display = "block";
document.getElementById("background").style.display = "block";
}