Twitter引導。當添加類「詞綴」時添加一個新類

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的，所以在div #main具有

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

和一旁.cart，包裝有

.cart-wrapper{ 
width: 400px; 
} 

的購物車，包裝必須是正確的頁面的一面。當用戶向下滾動頁面時，在50px之後，我想要這個div在固定。所以我使用bootstrap的詞綴插件。 一切工作正常，但當引導將.affix類添加到購物車包裝，#main div增長，填充頁面。這是因爲cart-wrapper在添加詞綴類時不在流中（position：fixed）。

爲了避免#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'); 
    } 
});