Vue.js 2 + Bootstrap-Vue.js：让列跟随用户

Question

我一直在使用Vue.js和Bootstrap-Vue构建一个小测试应用程序，假设我的应用程序是这样的：

    <b-container>
        <b-row>
            <b-col col md="9">
                // Page content...
            </b-col>
            <b-col col md="3">
                <cart></cart>
            </b-col>
        </b-row>
    </b-container>

如何滚动显示b-col cart或cart本身会跟随用户？与bootstrap 3 Affix插件中提供的方式类似？

这意味着要有一个很长的左/第一b-col来显示产品，而右/秒b-col有一个跟随用户的购物车。

谢谢。

Answer 1

我是一个解决方案，考虑到这是cart：

的模板

<template>
<div class="cart">
    <h1>Items</h1>
    <ul>
        <li v-for=...</li>
    </ul>
</div>
</template>

只需将其添加到CSS：

div.cart {
    position: -webkit-sticky;
    position: sticky;
    top: 40px;
    height: calc(100vh - 40px);
    overflow-y: auto
}

完成。