removeClass не работает - класс не удален

Question

Я делаю мобильное меню с burger-btn, которое запускает полный наложение.

Это сработало, но возникла проблема с прокруткой содержимого за оверлей. Я использовал эту строку кода

if($('.nav-container').is(':visible')) { 
    $('body').addClass("fixedPosition"); 
} else { 
    $('body').removeClass("fixedPosition"); 
} 

С помощью этой строки CSS, чтобы прокрутка позади наложения была очищена.

.fixedPosition { 
    overflow: hidden; 
} 

Проблема заключается в следующем - при закрытии накладки, этот класс .fixedPosition не удаляются, как это должно быть.

У кого-нибудь есть исправление для этого?

Смотрите мою скрипку: https://jsfiddle.net/bdL76s59/1/

Answer 1

Это, кажется, работает в моей скрипкой

if($('.nav-container').is(':visible')) 
    { 
     $('body').toggleClass("fixedPosition"); 
    } 

}); 

https://jsfiddle.net/bdL76s59/2/

Edit:

Добавление $('body').toggleClass("fixedPosition"); после того как ваш код работает отлично.

Answer 2

Это потому, что ваше условие выполнено до завершения события переключения. Попробуйте это:

menu.fadeToggle(function(){ 

         if($('.nav-container').is(':visible')) 
         { 
          $('body').addClass("fixedPosition"); 
         } 
         else 
         { 
          $('body').removeClass("fixedPosition"); 

         } 
         }); 

См скрипку:

https://jsfiddle.net/bdL76s59/3/

Answer 3

fadeToggle() занимает некоторое время, чтобы закончить анимировать непрозрачность. До тех пор пока он еще не закончен display Недвижимость не переключается с block на none, но ваш код проверяет, видно ли меню сразу после того, как вы начали анимацию затухания, поэтому она все еще видна. Ваш блок еще никогда не запускается. Чтобы сделать его работу по желанию, вы должны поставить код манипуляции класса для fadeToggle() полных обратного вызова:

menu.fadeToggle(function() { 
    if($('.nav-container').is(':visible')) 
    { 
     $('body').addClass("fixedPosition"); 
    } 
    else 
    { 
     $('body').removeClass("fixedPosition"); 
    } 
});