Whenever I click on my button with the class "cd-btn," it triggers the toggling of my panel with the class "cd-panel.is-visible."
jQuery(document).ready(function($){
//open the lateral panel
$('.cd-btn').on('click', function(event){
event.preventDefault();
$('.cd-panel').toggleClass('is-visible');
});
The class ".is-visible" is defined as:
.cd-panel.is-visible {
visibility: visible;}
To prevent the body from scrolling when the panel is open or visible, I currently use the following code:
$(".cd-panel").mouseenter(function(){
$("body").css("overflow", "hidden");
}).mouseleave(function(){
$("body").css("overflow", "visible");
});
However, this method only works when I hover over the panel with my mouse. I am looking to achieve the same effect when opening the panel itself. How can I set the body to have overflow:hidden when the panel opens, and then switch it back to overflow:visible when the panel is closed? Additionally, I would like to set the body's position to fixed when the panel is open, and back to relative when the panel is closed.