推特bootstrap。添加 class"affix" 时添加新的 class

Question

我有一个关于 bootstrap 词缀和 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;
}

购物车包装必须位于页面右侧。当用户向下滚动页面时，在 50px 之后，我希望这个 div 固定。所以我正在使用 bootstrap 的词缀插件。一切正常，但是当 bootstrap 将 .affix class 添加到 cart-wrapper 时，#main div 增长，填满了页面。这是因为购物车包装器在添加词缀 class 时不在流程中（位置：固定）。

为了避免 #main div 的增长，我想添加一个 class，像这样：

.affixAdded{margin-right: 400px;}

这样，布局是一样的，即使在添加.affix class之后。

我正在尝试使用 jquery 来完成此操作。我试过这段代码，但它不起作用。

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

你能帮我弄清楚为什么它不起作用或如何达到我的目标吗？非常感谢

Answer 1

尚未测试此代码。但据我了解，问题出在滚动时。所以检查用户何时滚动，如果有一个带有 class 后缀的元素，它会将 class 添加到 #main 元素，否则它会删除它。

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

推特bootstrap。添加 class"affix" 时添加新的 class

Twitter bootstrap. Add a new class when class"affix" is added

jquery

layout

flexbox

affix

twitter-bootstrap-3