Начальная загрузка Твиттера. Добавить новый класс при добавлении classaffix

У меня вопрос относительно аффикса начальной загрузки и 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, поэтому div #main имеет

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

а в стороне .cart-wrapper есть

.cart-wrapper{
width: 400px;
}

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

Чтобы избежать роста #main div, я хочу добавить класс, подобный этому:

.affixAdded{margin-right: 400px;}

Таким образом, макет остается прежним, даже после добавления класса .affix.

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

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

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


layout jquery flexbox twitter-bootstrap-3 affix
person Matteo Vacca    schedule 08.01.2015    source источник
comment
В вашем операторе if отсутствует закрывающая ).   -  person Jamie Dunstan    schedule 08.01.2015
comment
Это опечатка. Это есть в исходном коде.   -  person Matteo Vacca    schedule 08.01.2015

Ответы (1)


arrow_upward
0
arrow_downward

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

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