2016-07-26 11 views
0

Ich muss mehrere Klassen für reaktionsschnelle Zwecke hinzufügen. Ich möchte hinzufügen navbar-fixed-top, nachdem es col-xs-4 zu jedem Element hinzufügen, die addxs auch enthalten, wird die gleiche Reaktion auf removeClass auch gelten.Jquery addClass in Kaskadenweise

Ich versuchte Code unten, aber kein Glück überhaupt.

<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'); 
     } 
     }); 
    } 
}); 

Antwort

0

Versuchen Sie folgendes:

<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> 
Verwandte Themen