Bootstrap3的粘性行

Question

我的标题中有以下行：

<div id="shop-cart-count-mobile" class="visible-xs">
    <a href="/shop/cart">
    <div class="container">
        <div class="row">
            <div class="col-xs-9 mt10 mb10">
                <h4>In Your Cart</h4>
            </div>
            <div class="col-xs-3 text-right mt10 mb10">
                <h4>
                    <span class="fa fa-shopping-basket"></span>
                    4</h4>
            </div>
        </div>
    </div>
    </a>
</div>

我想让它成为一个粘性行，这样当用户向下滚动时，它就会停留在屏幕的顶部。它目前不在顶部，它在其中几行。

我尝试使用 position:sticky 但没有运气，我不确定 bootstrap3 是否有内置功能可以做到这一点。我在这里缺少一个简单的解决方案吗？

我构建了一个 codepen，但仍然无法使用它：https://codepen.io/chud37/pen/oNZzLwx

Answer 1

尝试使用前 0

.your-class {
     position: -webkit-sticky;
     position: sticky;
     top: 0;
   }

Answer 2

.parent_class {
     position: sticky;
     top:0;
    }

您必须指定位置top:0; 才能使其工作 这是 Web dev 简化的关于 CSS 粘性位置的视频 https://www.youtube.com/watch?v=NzjU1GmKosQ