removeClassは機能しません - クラスは削除されません -

Question

私はフルサイズのオーバーレイを引き起こすburger-btnでモバイルメニューを作っています。

これは機能しましたが、オーバーレイの背後にあるコンテンツのスクロールに問題が発生しました。私はこのコード行を使用しました

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

このCSSの行では、オーバーレイの後ろのスクロールが消去されます。

.fixedPosition { 
    overflow: hidden; 
} 

問題はこれです - オーバーレイを閉じるときにそれがあるべきように、このクラス.fixedPosition は削除されません。

誰にもこの修正がありますか？あなたのコードは正常に動作した後$('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ブロックは決して走りません。 必要に応じて、それを動作させるために、あなたはfadeToggle()完全なコールバックに自分のクラスの操作コードを配置する必要があります。

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