Ввод класса обратно в его первоначальное место

Question

У меня есть 2 меню. Оба они размещены в разных позициях. Когда мой экран достигает определенной ширины, оба меню исчезают, и я добавляю второе меню в начало, для обоих меню есть две кнопки. Проблема, с которой я сталкиваюсь, заключается в том, что когда я изменяю размер экрана до большей ширины, я не могу получить второе меню, чтобы вернуться в нужное место, не добавляя second_menu снова и снова при изменении размера,

Мой HTML

<div class="row"> 
    <div class="col-lg-12"> 
     <div class="inside_scroll"> 
      <div class="inside_menu"> 
       <div class="lang_menu_mobile"></div> 
       <div class="toggle_wrapper"></div> 
       <div class="home_small_logo"></div> 
       <div id="main-menu" class="collapse navbar-collapse main_menu main_menu_inside"></div> 
      </div> 
     </div> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-lg-12 second_menu_wrapper"> 
     <div class="col-lg-4 col-md-4"> 
      <div class="second_menu"> 
       <div id="second-menu" class="collapse navbar-collapse menu_two"> 
        <ul class="nav navbar-nav inside-nav"> 
         <li class="active_sub_menu"> 
         <li class="sub_menu"> 
         <li class="sub_menu"> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Мои JS

if($(window).innerWidth() < 753){ 
    console.log("load < 753"); 

    $(window).scroll(function(){ 
     if($(window).scrollTop() > 0) { 
      $('.inside_menu').addClass('navbar-fixed-top mobile_scroll_menu_inside').css({margin: '0 auto', width: '96%', 'border-top' : 'none', 'background' : '#f7f7f7', 'height' : '58px', 'padding-left' : '0', 'padding-right' : '0'}).prepend($(".second_menu").css({'position' : 'relative', 'top' : '46px'})); 
      $('.home_small_logo').hide(); 
     } else { 
      $('.inside_menu').removeClass('navbar-fixed-top mobile_scroll_menu_inside').css({width: '100%', 'border-top' : 'none', 'background' : 'none', 'padding-left' : '0', 'padding-right' : '0'}); 
     } 
    }); 
} 

if($(window).innerWidth() < 1200){ 
    console.log("resize < 1200"); 

    $('.inside_menu').removeClass('mobile_scroll_menu_inside').css({margin: '0 auto', width: '1024px', 'background' : '#ffffff'}); 
    $('.second_menu_wrapper .col-md-4').prepend($(".second_menu")); 

    $(window).scroll(function(){ 
     if($(window).scrollTop() > 0) { 
      $('.inside_menu').addClass('navbar-fixed-top').css({margin: '0 auto', width: '1024px', 'background' : '#ffffff'}); 
      $('.inside_menu').removeClass('mobile_scroll_menu_inside'); 
      $('.home_small_logo').show(); 
     } else { 
      $('.inside_menu').removeClass('navbar-fixed-top').css({width: '100%', 'background' : 'none'}); 
     } 
    }); 
} 

if($(window).innerWidth() < 995){ 
    console.log("resize < 995"); 

    $(window).scroll(function(){ 
     if($(window).scrollTop() > 0) { 
      $('.inside_menu').addClass('navbar-fixed-top mobile_scroll_menu_inside').css({margin: '0 auto', width: '77.4%', 'border-top' : 'none', 'background' : '#e7e7e6', 'height' : '58px', 'padding-left' : '0', 'padding-right' : '0'}).prepend($(".second_menu").css({'position' : 'relative', 'top' : '46px'})); 
      $('.home_small_logo').hide(); 
     } else { 
      $('.inside_menu').removeClass('navbar-fixed-top mobile_scroll_menu_inside').css({width: '1024px', 'border-top' : 'none', 'background' : 'none', 'padding-left' : '0', 'padding-right' : '0'}); 
     } 
    }); 
} 

Answer 1

Вы должны связать те, чтобы изменить событие, как следующим образом:

$(window).resize(function(){ 
    //your code for menus. 
}); 

Попробуйте обернуть свой код вокруг блока выше.