vue实现吸顶

Posted 2021-02-11 zeishuai

话不多说，看代码。

<template>
    <div class="nav" :class="isFixed== true?‘isFixed‘:‘‘">
        <ul>
            <li @click="handlebtn()">
                综合
                <i class="iconfont">&#xe502;</i>

            </li>
            <li>
                品牌
                <i class="iconfont">&#xe502;</i>
            </li>
            <li>
                分类
                <i class="iconfont">&#xe502;</i>
            </li>
            <li>
                筛选
                <i class="iconfont">&#xe502;</i>
            </li>
        </ul>
        <!--<transition name="move">-->
        <div class="one" v-if="flag">
            <li>综合排序<i class="iconfont">&#xe601;</i></li>
            <li>销量从高到低</li>
            <li>价格从低到高</li>
            <li>价格从高到低</li>
            <li>最新商家商品</li>
            <li>折扣从高到低</li>
        </div>
        <!--</transition>-->
    </div>
</template>

<script>
    export default {
        data() {
            return {
                flag: false,
                isFixed: "false"
            }
        },
        methods: {
            handlebtn() {
                this.flag = !this.flag;
            },
            handleScroll() {
                var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
                if(scrollTop >44) {
                    this.isFixed = true;
                } else {
                    this.isFixed = false;
                }
            }
        },
        mounted() {
            window.addEventListener(‘scroll‘, this.handleScroll)
        }

    }
</script>

<style scoped lang="scss">
    .nav {
        width: 100%;
        height: .76rem;
        background: #fff;
        border-bottom:.01rem solid #e8e8e8;
        ul {
            width: 100%;
            height: 100%;
            display: flex;
            li {
                width: 25%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: .32rem;
                i {
                    font-size: .5rem;
                }
            }
        }
        .one {
            width: 400%;
            height: 5.4rem;
            background: #fff;
            li {
                width: 7.5rem;
                padding: 0 .4rem;
                height: .9rem;
                font-size: .32rem;
                border-top: .01rem solid #e8e8e8;
                color: #404040;
                display: flex;
                align-items: center;
                justify-content: space-between;
                i {
                    font-size: .4rem;
                }
            }
        }
    }
    .isFixed{
        position:fixed;
        left: 0;
        top:0;
        z-index: 10;
    }
</style>