Невозможно переключить атрибут и класс на событие изменения размера окна

Question

Я добавляю свойство position в div по определенной ширине контейнера div и удаляет одно и то же свойство на другой ширине этого контейнера div, он работает, но он не переключается, я имею в виду, что он придерживается того, что было применено первым, аналогичная проблема происходит с классом, я что-то упускаю? Я хочу, чтобы переключиться, что означает, что оба типа и класса должны быть добавлены, когда ширина больше 711px, и оба они должны быть удалены, когда ширина меньше 711px, после мой код:

Javascript :

$(function() { 
$(window).resize(function() { 
    var windowSize = $('#mainContainer').width(); 

    if (windowSize > 711) { 
     $('#navBar').attr('style', 'position: fixed'); 
     $('#mainContent').addClass('offset2'); 

    } 
    if (windowSize < 711) { 
     $('#navBar').removeAttribute('style'); 
     $('#mainContent').removeClass('offset2'); 
    } 
}); 

});

HTML:

<div class="container-fluid"> 
     <div class="row-fluid" id="mainContainer"> 
      <div class="span2" id="navBar" > 
       <nav> 
        <ul class="nav nav-tabs nav-stacked "> 
         <li><a href="#">Home</a></li> 
         <li><a href="#">Spotlight</a></li> 
         <li><a href="#">Movies</a></li> 
         <li><a href="#">Tv Shows</a></li> 
         <li><a href="#">Show Case</a></li> 
         <li><a href="#">About</a></li> 
         <li><a href="#">Subscribed</a></li> 
        </ul> 
       </nav> 
      </div> 
      <div class="span10" id="mainContent"> 
     <p> 
      Enter a long paragrah of dummy text here, in order to see if the sidebar is scrolling along! 

     </p> 
    </div> 

</div> 

Answer 1

Использование .css('position','fixed') не .attr('style', 'position: fixed'). Попытка:

$(window).resize(function() { 
    var windowSize = $('#mainContainer').width(); 
    if (windowSize > 711) { 
     $('#navBar').css('position','fixed'); 
     $('#mainContent').addClass('offset2'); 

    } 
    if (windowSize < 711) { 
     $('#navBar').css('position','relative'); 
     $('#mainContent').removeClass('offset2'); 
    } 
});