Qquery addClassをカスケードで使用する

Question

応答性の高い目的で複数のクラスを追加する必要があります。私はaddxsを含む各要素にcol-xs-4を追加した後にnavbar-fixed-topを追加したいが、同じ反応もremoveClassに適用されます。

私は以下のコードを試しましたが、運は全くありませんでした。

<div class="middle"> 
    <nav class="navbar navbar-default"> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-md-3 col-sm-3 addxs logo"> 
        <div class="navbar-header"> 
         <a href="#" class="navbar-brand"> 
          logo 
         </a> 
         <button type="button" class="navbar-toggle collapsed toggle-red toggle-me" data-toggle="collapse" data-target="#bs-navbar-collapse-1" aria-expanded="false"> 
          <span class="sr-only">Toggle navigation</span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
         </button> 
        </div> 
       </div> 

       <div class="col-md-6 col-sm-6 addxs"> 
        something 
       </div> 

       <div class="col-md-3 col-sm-3 addxs"> 
        something 
       </div> 
      </div><!-- /.row --> 
     </div><!-- /.container --> 
    </nav> 
</div><!-- /.middle --> 

のjQuery：

$(function(){ 
    if($(window).width() <= 480){ 

     $(window).scroll(function() { 
      if($(this).scrollTop() > 240) { 
       $('.middle nav.navbar-default').addClass('navbar-fixed-top').parent().next().find('.addxs').addClass('col-xs-4'); 
      }else{ 
      $('.middle nav.navbar-default').removeClass('navbar-fixed-top').parent().next().find('.addxs').removeClass('col-xs-4'); 
     } 
     }); 
    } 
}); 

Answer 1

これを試してみてください：

<script type="text/javascript"> 
    $(function(){ 
    if($(window).width() <= 480){ 

     $(window).scroll(function() { 
      if($(this).scrollTop() > 240) { 
       $('.middle nav.navbar-default').addClass('navbar-fixed-top'); 
       $('.middle nav.navbar-default').find('.addxs').addClass('col-xs-4'); 
      }else{ 
       $('.middle nav.navbar-default').removeClass('navbar-fixed-top'); 
       $('.middle nav.navbar-default').find('.addxs').removeClass('col-xs-4'); 
     } 
     }); 
    } 
}); 
</script>