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的affix插件。一切正常，但是当bootstrap将.affix类添加到cart-wrapper时，＃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');
    }
});

Twitter引导程序。在课堂上添加一个新课程＆＃34;词缀＆＃34;被添加

1 个答案: