Search code examples
jqueryhtmlcsspanel

Prevent body from scrolling when side panel opens

I toggle my panel by click on my button cd-btn which call a new 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 .is-visible class:

 .cd-panel.is-visible {
  visibility: visible;}

I would like to prevent the body from scrolling when the panel opens or is-visible. So far I have achieved this by:

$(".cd-panel").mouseenter(function(){
  $("body").css("overflow", "hidden"); 
}).mouseleave(function(){
  $("body").css("overflow", "visible");
});

which works only when i enter or leave the panel with my mouse. But I would like to achieve this by just opening the panel. How can I add the overflow:hidden style to the body when the panel opens and then when I close it it would turn the overflow to visible. I would also like to add position:fixed to the body when my panel opens and it would return to position:relative after closing the panel

Solution

  • I might have figured out what was the problem by reading your(OPs) & @Praveen-Kumar comments.

    Instead of checking :visible just check if the element has the class is-visible or not, which eventually decides whether the element is visible or not.

    So your code becomes...

    $('.cd-btn').on('click', function(event){
  event.preventDefault();
  $('.cd-panel').toggleClass('is-visible');
  if ($('.cd-panel').hasClass("is-visible")) // Changed this line from your link.
    $("body").css("overflow", "hidden");
  else
    $("body").css("overflow", "visible");
});