Twitter бутстрап. Добавить новый класс, когда добавлен класс «affix»

Question

У меня вопрос относительно ассемблера загрузки и CSS3.

<section id="main"> 
    <div class="myContainer"> 
    some content 
    </div> 

    <aside class="cart-wrapper" data-spy="affix" data-offset-top="50"> 
    some content 
    </aside> 
</section> 

Я использую Flexbox, поэтому ДИВ #main имеет

#main{ 
display:flex; 
height: 100%; 
align-items: stretch; 
} 

и в сторону .cart-обертка имеет

.cart-wrapper{ 
width: 400px; 
} 

Тележка-обертка должна быть справа стороне страницы. Когда пользователи прокручивают страницу вниз, после 50px, я хочу, чтобы этот div был исправлен. Поэтому я использую плагин аффикса бутстрапа. Все работает отлично, но когда bootstrap добавляет класс .affix в корзину-обертку, #main div растет, заполняя страницу. Это потому, что cart-wrapper, когда добавлен класс аффикса, выходит из потока (позиция: фиксированная).

Чтобы избежать роста #main DIV Я хочу, чтобы добавить класс, как этот:

.affixAdded{margin-right: 400px;} 

В этом случае расположение такое же, даже после того, что добавляется класс .affix ,

Я пытаюсь сделать это с помощью jquery. Я пробовал этот код, но он не работает.

if($('#cart-wrapper').hasClass('affix'){ 
    $('#main').addClass('affixAdded'); 
} 

Не могли бы вы помочь мне разобраться, почему это не работает или как достичь моей цели? Большое вам спасибо

Answer 1

Еще не проверял этот код. Но из того, что я понимаю, проблема заключается в прокрутке. Поэтому проверяйте, когда пользователь прокручивается, и если есть элемент с аффикс класса, он добавит класс в элемент #main, иначе он удалит его.

$(document).scroll(function(){ 
    if($('some_element').length == 0) { 
     $('#main').removeClass('affixAdded'); 
    } 
    else{ 
     $('#main').addClass('affixAdded'); 
    } 
});