zoukankan      html  css  js  c++  java
  • vue实现吸顶

    话不多说,看代码。

    <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 {
             100%;
            height: .76rem;
            background: #fff;
            border-bottom:.01rem solid #e8e8e8;
            ul {
                 100%;
                height: 100%;
                display: flex;
                li {
                     25%;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: .32rem;
                    i {
                        font-size: .5rem;
                    }
                }
            }
            .one {
                 400%;
                height: 5.4rem;
                background: #fff;
                li {
                     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>
  • 相关阅读:
    ABAP接口用法
    监听textarea数值变化
    The first step in solving any problem is recognizing there is one.
    Wrinkles should merely indicate where smiles have been.
    God made relatives.Thank God we can choose our friends.
    Home is where your heart is
    ABAP跳转屏幕
    Python 工具包 werkzeug 初探
    atom通过remote ftp同步本地文件到远程主机的方法
    Mongodb学习笔记一
  • 原文地址:https://www.cnblogs.com/zeishuai/p/10460731.html
Copyright © 2011-2022 走看看