removeClass가 작동하지 않습니다. - 클래스가 제거되지 않았습니다.

Question

전폭 오버레이를 트리거하는 burger-btn으로 모바일 메뉴를 만들고 있습니다.

이 방법은 효과가 있었지만 오버레이 뒤에서 내용을 스크롤 할 때 문제가 발생했습니다. 오버레이 뒤에 스크롤이 해제 될 수 있도록 내가 CSS의 라인 코드

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

이 라인을 사용했다. 오버레이를 닫을 때 그것이 있어야로,이 클래스 .fixedPosition 가 제거되지 않습니다 -

.fixedPosition { 
    overflow: hidden; 
} 

문제

이입니다.

누구에게도 수정 사항이 있습니까? 코드가 잘 작동 후 $('body').toggleClass("fixedPosition"); 추가

: https://jsfiddle.net/bdL76s59/1/

Answer 1

이 내 바이올린

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

}); 

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

편집에서 작동하는 것 같다 :

내 바이올린을 참조하십시오.

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으로 토글되지 않지만 페이드 애니메이션을 시작한 직후에 메뉴가 표시되는지 확인하므로 여전히 볼 수 있습니다. else 블록은 절대 실행되지 않습니다.

는

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