购物车底部固定，下滑到下面不固定

首先需要写两个底部一个是固定的一个是不固定的
在data里定义一个值

fixed:false  //判断是否固定

需要固定的底部 在div上加一个v-if=“fixed” ，当fixed为true的时候固定

v-if="fixed"

不需要固定的底部 在div上加一个ref=“total”

ref="total"

下面是整块代码

<div v-if="fixed" id="list-content" class="fixClass">
            <div class="bottomLeft">
                <el-checkbox v-model="selectAllCheck" @change="allCheck">全选</el-checkbox>
                <span class="delBottom" @click="delAllItem">
                    删除
                </span>
            </div>
            <div class="bottomRight">
                <span>已选</span>
                <span class="num">{{ multipleSelection.length }}</span>
                <span>件商品</span>
                <span class="totalBottom">合计</span>
                <span class="num">￥{{ toFixedTwo(totalPrice) }}</span>
                <div class="settlement" @click="submitOrder">
                    结算
                </div>
            </div>
        </div>
        <div ref="total" id="list-content" class="bottomClass">
            <div class="bottomLeft">
                <el-checkbox v-model="selectAllCheck" @change="allCheck">全选</el-checkbox>
                <span class="delBottom" @click="delAllItem">
                    删除
                </span>
            </div>
            <div class="bottomRight">
                <span>已选</span>
                <span class="num">{{ multipleSelection.length }}</span>
                <span>件商品</span>
                <span class="totalBottom">合计</span>
                <span class="num">￥{{ toFixedTwo(totalPrice) }}</span>
                <div class="settlement" @click="submitOrder">
                    结算
                </div>
            </div>
        </div>

data() {
        return {
            fixed: false, //判断是否悬浮
            total: null,
        }
    },

 mounted() {
        window.addEventListener("scroll", this.scrollEvent); //监听页面滚动事件
    },
    destroyed() {
        window.removeEventListener("scroll", this.scrollEvent, false);
    },
    methods: {
        scrollEvent() {
            //页面滚动事件
            var body = window.innerHeight;
            var scroll =
                document.documentElement.scrollTop || document.body.scrollTop;
            this.btnstop = this.$refs.total.offsetTop;
            var top = this.btnstop - body;
            if (this.btnstop > body) {
                if (this.fixed == false) {
                    this.fixed = true;
                }
            }
            if (scroll >= top) {
                this.fixed = false;
            }
        },
        }

css

.bottomClass {
    margin-top: 20px;
    background-color: #DDDDDD;
    width: 100%;
    height: 50px;
    // position: fixed;
    z-index: 999;
    // bottom: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 50px 0px 20px;
    font-size: 14px;
}

.fixClass {
    margin-top: 20px;
    background-color: #DDDDDD;
    width: 100%;
    height: 50px;
    position: fixed;
    z-index: 999;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 50px 0px 20px;
    font-size: 14px;
}

切记不可以使用class来判断，因为会根据你滑动来实时更新，页面上就会一闪一闪的